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

Comment puis-je utiliser la propriété dans les listes. Je suis à l'aide de VueJS v2.0.2.

Voici le code HTML:

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

Voici la Vue de code:

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

InformationsquelleAutor Inoyatulloh | 2016-10-29

57

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, afin que chacun puisse avoir son propre fullName propriété calculée.

Ce que vous pouvez faire, si vous ne voulez pas créer un user composant, est d'utiliser une méthode à la place. Vous pouvez déplacer fullName droit de la computed propriété methods, alors vous pouvez l'utiliser comme:
```
{{ fullName(user) }}
```
Également, note de côté, si vous vous trouvez avoir besoin de passer un argument à la computed vous voulez une méthode à la place.
- Que faire si vous avez besoin d'utiliser fullName plus d'une fois et le nom complet de la méthode est une fonction complexe qui serait vraiment à la dépense pour faire 10 fois pour chaque itération? Je pense que @PanJunie la solution serait beaucoup mieux dans cette situation.
- Je honnêtement ce faire beaucoup plus haut de l'état. Le résultat de l'approche ci-dessous serait briser si vous travaillez sur la version triée des éléments. Je n'étais certainement aller pour la sécurité. Il fait beaucoup plus de sens pour moi, pour rendre les données réutilisables que possible beaucoup plus haut.
- Mon problème, c'est que le tableau peut changer en fonction d'autres éléments qui s'sélectionnée et désélectionnée qui déclenche la réactivité de l'ensemble lui-même donc je ne peux pas vraiment le faire à un niveau supérieur, je ne pense pas, d'autres que, éventuellement, la création d'un filtre et d'ajouter dans les propriétés supplémentaires pour les objets dans le tableau à ce point (ce qui n'est pas une idée terrible, mais juste à cause d'un ajout boucle par le choix de faire tout ce qu' - deux fois c'est mieux de 10 fois, je suppose).
InformationsquelleAutor Bill Criswell
29

Ce qu'il vous manque ici, c'est que votre items est un tableau, qui contient tous les points, mais l' computed est un seul fullName, qui simplement ne peut pas exprimer tous les fullNames 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 sûrement œuvres, mais nous peut le faire avec calculée accessoires et je pense que c'est une meilleure conception de method en itérations, en particulier lorsque l'application devient plus grand. Aussi, computed a un gain de performance par rapport à method sur certaines circonstances: http://vuejs.org/guide/computed.html#Computed-Caching-vs-Methods
- Im en utilisant ce pour la mise en évidence d'une ligne dans une :class directive fonctionne mieux qu'une méthode.
- C'est moins portable. Si vous voulais passer par une triés copie de items et obtenir les nom et prénom ce serait un échec. Ce que devrait vraiment être fait, c'est un "utilisateur", ce qui permet à l'utilisateur de l'objet, qui a une fullName propriété calculée.
- Pourquoi il échoue lorsque items sont triés? @BillCriswell
- Si vous le faites v-for="item in sortedVersionOfItems" la index serait éteint.
InformationsquelleAutor PanJunjie潘俊杰

Vous devez vous connecter pour publier un commentaire.