web-dev-qa-db-fra.com

VueJS Comment utiliser la propriété calculée avec v-for

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

Voici le code 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;
        },
    },
});
javascriptvue.jscomputed-properties
54
Inoyatulloh

Vous ne pouvez pas créer une propriété calculée pour chaque itération. Idéalement, chacun de ces items serait leur composant propre afin que chacun puisse avoir sa propre propriété calculée fullName.

Si vous ne voulez pas créer de composant user, vous pouvez utiliser une méthode. Vous pouvez déplacer fullName directement de la propriété computed vers methods, vous pouvez l'utiliser comme suit:

{{ fullName(user) }}

De plus, si vous avez besoin de passer un argument à un computed, vous voudrez probablement une méthode à la place.

58
Bill Criswell

Ce qui vous manque ici, c'est que votre items est un tableau, qui contient tous les éléments, mais que computed est un simple fullName, qui ne peut tout simplement pas exprimer. le fullNames dans items. Essaye ça:

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 manière dont Bill introduit fonctionne sûrement, mais nous pouvons le faire avec des accessoires calculés et je pense que c'est un meilleur design que method en itérations, surtout quand l'application devient plus grande. De plus, computed présente un gain de performances par rapport à method dans certaines circonstances: http://vuejs.org/guide/computed.html#Computed-Caching-vs-Methods

29
PanJunjie潘俊杰