VueJS Comment puis-je utiliser la propriété calculée avec v-pour

Question

Comment puis-je utiliser la propriété calculée dans les listes. J'utilise VueJS v2.0.2.

Voici le HTML:

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

Voici le code 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

Vous ne pouvez pas créer une propriété calculée pour chaque itération. Idéalement, chacun de ces items serait leur propre composant donc chacun peut avoir sa propre propriété calculée fullName. Si vous ne voulez pas créer un composant user, vous pouvez utiliser une méthode à la place. Vous pouvez déplacer fullName depuis le computed propriété à methods, vous pouvez l'utiliser comme:

{{ fullName(user) }} 

En outre, note côté, si vous vous trouvez besoin de passer un argument à un computed vous voulez probablement une méthode à la place.

Answer 2

Qu'est-ce que vous êtes absent ici est que votre items est un tableau qui contient tous les éléments, mais le computed est un seul fullName, qui ne peuvent tout simplement pas exprimer toutes les fullName s dans items. Essayez ceci:

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

Puis dans la vue:

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

La façon dont le projet de loi introduit fonctionne sûrement, mais nous pouvons le faire avec des accessoires calculés et je pense qu'il est une meilleure conception que method en itérations , surtout quand l'application devient plus grande. En outre, computed a un gain de performance par rapport à method dans certaines circonstances: http://vuejs.org/guide/computed.html#Computed-Caching-vs-Methods