[解決済み] VueJS v-forでcomputedプロパティを使用するには？

質問

リストでcomputedプロパティを使用するにはどうすればよいですか。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;
        },
    },
});

どのように解決するのですか？

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

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

{{ fullName(user) }}

また、余談ですが、もし引数を computed に引数を渡す必要がある場合は、おそらく代わりにメソッドを使用することになるでしょう。