VueJS v-forで計算されたプロパティを使用するには

Question

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

Answer 1

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

userコンポーネントを作成したくない場合は、代わりにメソッドを使用してください。

また

{{ fullName(user) }} 

、サイドノートを、あなた自身が、あなたはおそらく代わりにメソッドをしたいcomputedに引数を渡す必要が見つけた場合：あなたは、あなたが好きそれを使用することができ、methodsに右computedプロパティからfullNameを移動することができます。あなたがここに欠けているもの

Answer 2

は、あなたのitemsは、すべてのアイテムを保持する配列、ですが、computedはちょうどitems内のすべてのfullName Sを表現することはできませんシングルfullName、ということです。

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

ビルが確実に導入されて動作する方法が、我々は計算された小道具でそれを行うことができますと私はそれがイテレーションでmethodより良いデザインだと思う：ビューに次に

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 
    } 
}); 

を：これを試してみてください特に、アプリが大きくなったとき。また、computedは、状況によってはmethodと比較してパフォーマンスが向上します。http://vuejs.org/guide/computed.html#Computed-Caching-vs-Methods