VueJS Cómo puedo usar la propiedad computada con v-for

Cómo puedo usar la propiedad computada en listas. Estoy usando VueJS v2.0.2.

Aquí está el HTML: 

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

Aquí está el código 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;
        },
    },
});
Author: Vini.g.fer, 2016-10-29
Source

2 answers

No se puede crear una propiedad calculada para cada iteración. Idealmente, cada uno de esos items sería su propio componente por lo que cada uno puede tener su propia fullName propiedad calculada.

Lo que puede hacer, si no desea crear un componente user, es usar un método en su lugar. Puedes mover fullName a la derecha desde la propiedad computed a methods, luego puedes usarla como: 

{{ fullName(user) }}

También, nota al margen, si usted encuentra que necesita pasar un argumentos a un computed es probable que desee un método en su lugar.

 35
Author: Bill Criswell,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-09-05 19:15:02

Lo que te falta aquí es que tu items es una matriz, que contiene todos los elementos, pero el computed es un único fullName, que simplemente no puede expresar todos los fullNames en items. Prueba esto: 

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

Luego en la vista: 

<div id="el">
    <p v-for="(item, index) in items">
        <span>{{fullNames[index]}}</span>
    </p>
</div>

La forma en que Bill introduce seguramente funciona, pero podemos hacerlo con apoyos calculados y creo que es un mejor diseño que method en iteraciones, especialmente cuando la aplicación se hace más grande. Además, computed tiene una ganancia de rendimiento en comparación con method en algunos circunstancias: http://vuejs.org/guide/computed.html#Computed-Caching-vs-Methods

 19
Author: PanJunjie潘俊杰,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-10-30 04:41:05