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，只有fullName ; t表达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>

然后在视图中：

method

Bill介绍的方式确实有效，但我们可以使用计算道具进行操作，我认为它在迭代中比computed设计得更好，尤其是当应用程序变大时。此外，method在某些情况下与set 1:1=Hello set array_row=1 set array_id=1相比有性能提升：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。我们可以通过在计算的prop中使用.reduce()而不是.map()来创建一个对象，并为item.id中的每个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是唯一的，例如来自典型数据库输出。

Answer 4

也许添加另一个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(...)"指令很方便。

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

4 个答案: