web-dev-qa-db-ja.com

VueJS v-forで計算プロパティを使用するにはどうすればよいですか

リストで計算プロパティを使用するにはどうすればよいですか。 VueJS v2.0.2を使用しています。

HTMLは次のとおりです。

<div id="el">
    <p v-for="item in items">
        <span>{{fullName}}</span>
    </p>
</div>

Vueコードは次のとおりです。

var items = [
    { id:1, firstname:'John', lastname: 'Doe' },
    { id:2, firstname:'Martin', lastname: 'Bust' }
];

var vm = new Vue({
    el: '#el',
    data: { items: items },
    computed: {
        fullName: function(item) {
            return item.firstname + ' ' + item.lastname;
        },
    },
});
javascriptvue.jscomputed-properties
54
Inoyatulloh

反復ごとに計算プロパティを作成することはできません。理想的には、これらのitemsのそれぞれがownコンポーネントになるため、それぞれが独自のfullName計算プロパティを持つことができます。

userコンポーネントを作成したくない場合にできることは、代わりにメソッドを使用することです。 fullNameをcomputedプロパティからmethodsに移動すると、次のように使用できます。

{{ fullName(user) }}

また、引数をcomputedに渡す必要がある場合は、代わりにメソッドが必要になる可能性があります。

58
Bill Criswell

ここで不足しているのは、itemsはすべてのアイテムを保持する配列ですが、computedは単一のfullNameであり、すべてのfullNames in items。これを試して：

var vm = new Vue({
    el: '#el',
    data: { items: items },
    computed: {
        // corrections start
        fullNames: function() {
            return this.items.map(function(item) {
                return item.firstname + ' ' + item.lastname;
            });
        }
        // corrections end
    }
});

次に、ビューで：

<div id="el">
    <p v-for="(item, index) in items">
        <span>{{fullNames[index]}}</span>
    </p>
</div>

ビルが紹介する方法は確かに機能しますが、計算された小道具を使用してcanできます。特に、反復でmethodよりも優れた設計だと思いますアプリが大きくなったとき。また、computedは、特定の状況でmethodと比較してパフォーマンスが向上します。 http://vuejs.org/guide/computed.html#Computed-Caching-vs-Methods

29
PanJunjie潘俊杰