Wie kann ich berechnete Eigenschaften in Listen verwenden? Ich verwende VueJS v2.0.2.
Hier ist der HTML-Code:
<div id="el">
<p v-for="item in items">
<span>{{fullName}}</span>
</p>
</div>
Hier ist der Vue-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;
},
},
});
javascript
vue.js
computed-properties
Inoyatulloh
quelle
quelle
Was Sie hier vermissen, ist, dass Sie
items
ein Array sind, das alle Elemente enthält, aber dascomputed
ist ein einzelnes ArrayfullName
, das einfach nicht allefullName
s ausdrücken kannitems
. Versuche dies: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 } });
Dann in der Ansicht:
<div id="el"> <p v-for="(item, index) in items"> <span>{{fullNames[index]}}</span> </p> </div>
Die Art und Weise, wie Bill sie vorstellt, funktioniert sicherlich, aber wir können es mit berechneten Requisiten tun, und ich denke, es ist ein besseres Design als
method
bei Iterationen, insbesondere wenn die App größer wird. Hatcomputed
auch einen Leistungsgewinn im Vergleich zumethod
unter bestimmten Umständen: http://vuejs.org/guide/computed.html#Computed-Caching-vs-Methodsquelle
:class
Direktive funktioniert besser als eine Methode.items
durchgehen und den vollständigen Namen erhalten möchten, schlägt dies fehl. Was wirklich getan werden sollte, ist eine "Benutzer" -Komponente, die ein Benutzerobjekt mit einer berechneten Eigenschaft "fullName" verwendet.items
sortiert werden? @ BillCriswellv-for="item in sortedVersionOfItems"
dieindex
wäre weg.Ich mag die Lösung von PanJunjie 潘俊杰. Es wird zum Kern des Problems, indem es nur
this.items
einmal (während der Komponentenerstellungsphase) wiederholt und dann das Ergebnis zwischengespeichert wird. Dies ist natürlich der Hauptvorteil für die Verwendung einer berechneten Requisite anstelle einer Methode.computed: { // corrections start fullNames: function() { return this.items.map(function(item) { return item.firstname + ' ' + item.lastname; }); } // corrections end }
.
<p v-for="(item, index) in items"> <span>{{fullNames[index]}}</span> </p>
Das einzige, was mir nicht gefällt, ist, dass im DOM-Markup über den Listenindex darauf
fullNames
zugegriffen wird. Wir könnten dies verbessern, indem wir.reduce()
anstelle.map()
der berechneten Requisite ein Objekt mit einem Schlüssel für jedesitem.id
In erstellenthis.items
.computed: { fullNames() { return this.items.reduce((acc, item) => { acc[item.id] = `${item.firstname} ${item.lastname}`; return acc; }, {}); }, },
.
<p v-for="item in items" :key="`person-${item.id}`"> <span>{{ fullNames[item.id] }}</span> </p>
Hinweis: Im obigen Beispiel wird davon
item.id
ausgegangen, dass dies eindeutig ist, z. B. bei einer typischen Datenbankausgabe.quelle
Fügen Sie möglicherweise ein weiteres v-for hinzu, das eine Liste mit einem Element durchläuft:
<div id="el"> <p v-for="item in items"> <template v-for="fullName in [item.firstName + ' ' + item.lastName]"> <span>{{fullName}}</span> </template> </p> </div>
Nicht schön, aber genau das suchen Sie: ein Objekt in diesem Bereich mit einer Eigenschaft namens fullName, die diesen bestimmten Wert enthält.
Und es ist nicht nur eine Eitelkeitsfunktion, da wir diesen Wert möglicherweise an mehr als einer Stelle verwenden müssen, z.
<span v-if="...">I am {{fullName}}</span> <span v-else-if="...">You are {{fullName}}</span> <span v-else>Who is {{fullName}}?</span>
Mein Anwendungsfall war, dass ich Daten in v-for-Schleifen (ja, einem anderen Kalender) konstruierte, wie:
<v-row v-for="r in 5"> <v-col v-for="c in 7"> <template v-for="day in [new Date(start.getTime() + 24*60*60*1000*((c-1) + 7*(r-1)))]"> <span> Some rendering of a day like {{day.getYear()}} and {{day.getMonth()}} etc. </span> </template> </v-col> </v-row>
(Der Kürze halber habe ich das weggelassen
:key="whatever"
Einstellungen )Ich gebe zu, dass der schönste Weg wäre, dies in eine separate Komponente zu verschieben, aber wenn wir für jeden solchen Zweiliner eine neue Komponente erstellen und diese Komponente nur an dieser einzigen Stelle verwenden, verschmutzen wir einfach einen anderen Namespace.
Vielleicht wäre eine
v-let="day as new Date(...)"
Richtlinie für diesen Zweck nützlich.quelle