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

Answer 1

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

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

{{ fullName(user) }}

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

Answer 2

你在这里缺少的是你的 items 是一个数组，它包含所有项目，但 computed 是一个单一的 fullName，它不能表达items中的所有fullName。试试这个：

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

Answer 3

我喜欢潘俊杰潘俊杰的解法。它通过仅迭代 this.items 一次（在组件创建阶段）然后缓存结果来解决问题的核心。这当然是使用计算道具而不是方法的主要好处。

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。我们可以通过在 computed prop 中使用 .reduce() 而不是 .map() 来改进它，从而为 this.items.

中的每个 item.id 创建一个带有键的对象

Consider this example:

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 是唯一的，例如来自典型的数据库输出。

Answer 4

也许添加另一个 v-for 遍历 one-item-long 列表：

<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" 设置）

我承认最好的方法是将其移动到一个单独的组件，但是如果我们像这样为每个 two-liner 创建一个新组件，并且只在这个地方使用该组件，那么我们只是污染了另一个命名空间。

也许 v-let="day as new Date(...)" 指令可以方便地用于此目的。

Answer 5

你必须在函数调用中传递参数

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

VueJS 如何将计算的属性与 v-for 一起使用

VueJS How can I use computed property with v-for

javascript

vue.js

computed-properties

VueJS 如何将计算的 属性 与 v-for 一起使用

VueJS How can I use computed property with v-for

javascript

vue.js

computed-properties

VueJS 如何将计算的属性与 v-for 一起使用