26

first_name と last_name を持つユーザー データ オブジェクトと、完全な名前を返す計算されたプロパティがありますが、v-for ディレクティブでは次のように動作しないようです。

new Vue({

        el: '#content',

        data: {
          "users": [
            {
              "id": 3,
              "first_name": "Joe",
              "last_name": "Blogs"
            },
            {
              "id": 3,
              "first_name": "Jane",
              "last_name": "Doe"
            }
          ]
       },
        computed: {
           fullName: function (user) {
                return user.first_name + ' ' + user.last_name;
            }

        }

    });



    <tr v-for="user in users | orderBy fullName(user)">
          <td class="col-xs-6 col-sm-3 col-md-3 col-lg-3">
              {{fullName(user)}} 
         </td>
    <tr>
4

7 に答える 7

33

私は、Vue.js の計算されたプロパティが引数を受け入れることができるとは信じていません。それらは、追加の操作なしで自分自身を構築できるはずです。メソッドを作成してから、計算されたプロパティとして登録しようとしたことがあなたの欠点だと思います。

computedしたがって、関数の登録をmethods実際のものに変更するだけの簡単な修正になるはずです。

methods: {
       fullName: function (user) {
            return user.first_name + ' ' + user.last_name;
        }

    }

この方法では、他のコードを変更する必要はありません。

于 2016-01-01T22:48:48.013 に答える
21

https://github.com/vuejs/vue/issues/1189に記載されているように、計算されたプロパティでキャッシュを無効にしてみてください。これを行うと、計算値は常に再計算されます。

computed: {
  fullName: {
    cache: false,
    get() {
      return user.first_name + ' ' + user.last_name;
    }
  }
}
于 2017-01-04T22:14:28.177 に答える
1

宣言されていないネストされたプロパティで props プロパティを使用すると、同様のケースがありました。何らかの理由で、私はこの作品を

console.log(user.first_name)

       fullName: function (user) {
            console.log(user.first_name)
            return user.first_name + ' ' + user.last_name;
       }

また、ラムダ式を使用してこの作業を行いました https://stackoverflow.com/a/46234335/726751

computed: {
    fullName: _this => {
        return _this.user.first_name + ' ' + _this.user.last_name;
    }
}
于 2017-09-20T12:17:26.523 に答える
0

ここで同様の質問があります:動的にロードされたデータの下で、Vue.js で計算を動的に作成する方法。

しかし、最終的には、議論と試行錯誤の結果得られた結論から、可能な解決策がここにあります。いくつかの方法があります:

  1. item.computedProperty()各要素内で計算されたものを割り当てるエクステンダーを作成し、UIで使用して呼び出します(二重括弧を使用)
  2. データがロードされていると仮定します。たとえばitems、計算されたを各要素に割り当てるウォッチャーを作成し、内部に配置しextendedItemsます。計算された関数は UI にバインドされるとリアクティブになるため、UI はextendedItems代わりにitems
  3. vue を使用this.$setして、計算されたものへの反応性を手動で設定して有効にします。

これは、解番号 1 の関数で計算されたものを使用しています。

new Vue({

    el: '#content',

    data: {
      "users": [
        {
          "id": 3,
          "first_name": "Joe",
          "last_name": "Blogs"
        },
        {
          "id": 3,
          "first_name": "Jane",
          "last_name": "Doe"
        }
      ]
   },
    computed: {
        extendedUsers: function(){
            var users = this.users;
            for (var i in users)
                this.extendUser(users[i])

        },
        extendUser: function(user){
            user.fullName = function(){
                return user.first_name + " " + user.last_name;
            }
        }

    }

});



<tr v-for="user in users | orderBy user.fullName()">
      <td class="col-xs-6 col-sm-3 col-md-3 col-lg-3">
          {{user.fullName()}} 
     </td>
<tr>
于 2018-07-09T11:36:01.717 に答える