web-dev-qa-db-ja.com

Vue.js計算プロパティが機能しない

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>
vue.jscomputed-properties
13
adam78

Vue.jsの計算されたプロパティが引数を受け入れることができるとは思わず、追加の対話なしで自分自身を構築できるはずです。あなたのせいは、あなたがメソッドを書いて、それを計算されたプロパティとして登録しようとしたことだと思います。

したがって、関数の登録をcomputedからmethodsに変更するだけの簡単な修正方法です。

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

    }

これにより、他のコードを変更する必要がなくなります。

19
Azeame

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

computed: {
  fullName: {
    cache: false,
    get() {
      return user.first_name + ' ' + user.last_name;
    }
  }
}
15
Fernanda Lemos

計算されたプロパティは、そのようなネストをサポートしていません。

証明といくつかの回避策/代替ソリューション： https://github.com/vuejs/vue/issues/66

3
ceejayoz

計算されたプロパティでユーザーをマップし、このマップされた配列を次のように使用できます。

computed: {
  fullName: function () {
    return this.users.map(
      item => item.first_name + ' ' + item.last_name
    );
  }
}

次に、ビューで次のようなことができます。

<tr v-for="(user, item) in users">
   <td class="col-xs-6 col-sm-3 col-md-3 col-lg-3">
     {{fullName[item]}} 
   </td>
<tr>

そして、私はes6の矢印機能を使用しています。矢印機能を使用したくない場合は、次のようなことができます。

return this.users.map(
  function(item) {return item.first_name + ' ' +item.last_name}
);
2
Mali Naeemi

ここにも同様の質問があります： 動的にロードされたデータの下でVue.jsで計算を動的に行う方法 。

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

  1. 各要素内で計算されたものを割り当てるエクステンダーを作成し、UIでitem.computedProperty()を使用して呼び出します（二重括弧付き）
  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>
0
Hans Yulian

未確定のネストされたプロパティで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;
    }
}
0
Jorge Wander Santana Ureña