VueJS 如何在 v-for 中使用计算属性

Question

如何在列表中使用计算属性。我正在使用 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;
        },
    },
});

原文由 Inoyatulloh 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您不能为每次迭代创建计算属性。理想情况下，每一个 items 都是它们 自己的 组件，因此每个都可以有自己的 fullName 计算属性。

如果您不想创建 user 组件，您可以做的是使用一种方法。您可以将 fullName 从 computed 属性移动到 methods ，然后您可以像这样使用它：

 {{ fullName(user) }}

另外，请注意，如果您发现自己需要将参数传递给 computed 您可能需要一个方法。

原文由 Bill Criswell 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

您在这里缺少的是您的 items 是一个包含所有项目的数组，但是 computed 是单个 fullName ‘ ，它可以t 表示 — 中的所有 — items fullName s。尝试这个：

 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>

比尔介绍的方式确实有效，但我们 可以 使用计算道具来做到这一点，我认为在迭代中它比 method 更好的设计，尤其是当应用程序变大时。此外，在某些情况下，与 method 相比， computed 具有性能提升：http: //vuejs.org/guide/computed.html#Computed-Caching-vs-Methods

原文由 JJPandari 发布，翻译遵循 CC BY-SA 3.0 许可协议