VueJS मैं कैसे साथ वी-के लिए

Question

गणना संपत्ति का उपयोग कर सकते मैं सूचियों में गणना संपत्ति का उपयोग कर सकते हैं। मैं VueJS v2.0.2 उपयोग कर रहा हूँ।

<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

आप प्रत्येक यात्रा के लिए एक गणना प्रॉपर्टी नहीं बना सकते

यहाँ एचटीएमएल है। आदर्श रूप में, उन items से प्रत्येक अपने खुद घटक हो तो हर एक का अपना fullName परिकलित प्रॉपर्टी हो सकती हैं।

आप क्या कर सकते हैं अगर आप एक user घटक बनाने के लिए नहीं करना चाहते, बजाय एक विधि का उपयोग है। आप methods को computed संपत्ति से सही fullName स्थानांतरित कर सकते हैं, तो आप इसे पसंद का उपयोग कर सकते हैं:

{{ fullName(user) }} 

इसके अलावा, ओर ध्यान दें, आप की संभावना एक विधि चाहते बजाय यदि आप पाते हैं अपने आप को एक computed के लिए एक तर्क पारित करने के लिए की जरूरत है।

Answer 2

क्या तुम यहाँ भूल रहे हैं कि आपके items एक सरणी है, जो सभी वस्तुओं को धारण करता है है, लेकिन computed एक भी fullName, जो सिर्फ items में सभी fullName रों व्यक्त नहीं कर सकते है। ध्यान में रखते हुए फिर

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> 

रास्ता विधेयक निश्चित रूप से परिचय काम करता है, लेकिन हम गणना रंगमंच की सामग्री के साथ यह कर सकते हैं और मुझे लगता है कि यह पुनरावृत्ति में method तुलना में एक बेहतर डिजाइन है है, खासकर जब एप्लिकेशन बड़ा हो जाता है। http://vuejs.org/guide/computed.html#Computed-Caching-vs-Methods