javascript - parameter - vue js propiedades computadas

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

Question

¿Cómo puedo usar la propiedad calculada en las 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;
        },
    },
});

Answer 1

Lo que se está perdiendo aquí es que sus items son una matriz, que contiene todos los elementos, pero el computed es un solo nombre fullName , que simplemente no puede expresar todos los fullName en los 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 presenta seguramente funciona, pero podemos hacerlo con accesorios computarizados y creo que es un mejor diseño que el method en iteraciones, especialmente cuando la aplicación se hace más grande. Además, el computed tiene una ganancia de rendimiento en comparación con el method en algunas circunstancias: http://vuejs.org/guide/computed.html#Computed-Caching-vs-Methods

Answer 2

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

Lo que puede hacer, si no desea crear un componente de user , es utilizar un método en su lugar. Puede mover fullName directamente desde la propiedad computed a los methods , luego puede usarlo como:

{{ fullName(user) }}

Además, nota al margen, si necesita pasar un argumento a un computed es probable que desee un método.