如何在列表中使用计算属性。我正在使用 VueJS v2.0.2。
这是 HTML：
<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;
},
},
});
您不能为每次迭代创建计算属性。理想情况下，每个组件items都是自己的组件，因此每个组件都可以拥有自己的fullName计算属性。
如果您不想创建user组件，您可以做的是改用方法。您可以fullName从computed属性向右移动到methods，然后您可以像这样使用它：
{{ fullName(user) }}
另外，请注意，如果您发现自己需要将参数传递给 acomputed您可能需要一个方法。
您在这里缺少的是，您items是一个数组，其中包含所有项目，但computed是单个fullName，它无法表达 .s 中的所有fullNames items。试试这个：
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>
Bill 引入的方式肯定有效，但我们可以使用计算props来做到这一点，我认为这是比method迭代更好的设计，尤其是当应用程序变大时。此外，computed与method某些情况相比，性能有所提升：http : //vuejs.org/guide/computed.html#Computed-Caching-vs-Methods
喜欢潘俊杰潘俊杰的解决方案。通过只迭代this.items一次（在组件创建阶段），然后缓存结果，它成为了问题的核心。这当然是使用计算props而不是方法的主要好处。
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>
我唯一不喜欢的是，在 DOM 标记中，fullNames是通过列表索引访问的。我们可以通过在计算 prop 中使用.reduce()而不是.map()创建一个对象来改进它，每个item.idin都有一个键this.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>
注意：上面的示例假设它item.id是唯一的，例如来自典型的数据库输出。
也许添加另一个 v-for 迭代一个单项长的列表：
<div id="el">
<p v-for="item in items">
<template v-for="fullName in [item.firstName + ' ' + item.lastName]">
<span>{{fullName}}</span>
</template>
</p>
</div>
不好，但这就是您要查找的内容：该跨度周围的对象具有名为 fullName 的属性，该属性包含该特定值。
而且它不仅仅是一个虚荣功能，因为我们可能需要在多个地方使用该值，例如：
<span v-if="...">I am {{fullName}}</span>
<span v-else-if="...">You are {{fullName}}</span>
<span v-else>Who is {{fullName}}?</span>
我的用例是我在 v-for 循环中构建日期（是的，另一个日历），例如：
<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>
（为简洁起见，我省略了:key="whatever"设置）
我承认最好的方法是将它移动到一个单独的组件，但是如果我们像这样为每个双行创建一个新组件，并且只在这个地方使用该组件，那么我们只会污染另一个命名空间。
也许v-let="day as new Date(...)"指令会很方便用于这种目的。
你必须在函数调用中传递参数
<div id="el">
<p v-for="item in items">
<span>{{fullName(item)}}</span>
</p>
</div>