javascript - VueJS How can I use computed property with v-for

Question

How can I use computed property in lists. I am using VueJS v2.0.2.

Here's the HTML:

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

Here's the 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;
        },
    },
});

score 94 · Accepted Answer

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

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

{{ fullName(user) }}

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

score 48 · Accepted Answer

你在这里缺少的是你items是一个数组，它包含所有的项目，但它computed是一个单一的fullName，它不能表达所有的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>

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

score 7 · Accepted Answer

我喜欢潘俊杰潘俊杰发布的解决方案。它通过仅迭代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()而不是为每个in.map()创建一个带有一个键的 Object 来改进这一点。item.idthis.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是唯一的，例如来自典型的数据库输出。

score 0 · Accepted Answer

也许添加另一个 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(...)"指令会为此目的而派上用场。

score -1 · Accepted Answer

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

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

javascript - VueJS How can I use computed property with v-for

5 回答 5

Related

Reference