VueJS Как использовать вычисляемое свойство с v-for

Как использовать вычисляемое свойство в списках. Я использую 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;
        },
    },
});

Ответы

Ответ 1

Вы не можете создать вычисляемое свойство для каждой итерации. В идеале каждый из этих items будет их собственным компонентом, поэтому каждый может иметь свое собственное вычисляемое свойство fullName.

Что вы можете сделать, если вы не хотите создавать компонент user, вместо этого использует метод. Вы можете перемещать fullName прямо из свойства computed в methods, тогда вы можете использовать его как:

{{ fullName(user) }}

Кроме того, обратите внимание: если вам нужно передать аргументы в computed, скорее всего, вы захотите использовать метод.

Ответ 2

Здесь вам не хватает того, что ваш items - это массив, содержащий все элементы, но computed - это один fullName, который просто не может выразить все fullName в 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 имеет коэффициент усиления по сравнению с method при некоторых обстоятельствах: http://vuejs.org/guide/computed.html#Computed-Caching-vs-Methods