javascript - for - v repeat



¿Cómo invierto el orden de una matriz usando v-for y orderBy filter en Vue JS? (4)

Nota: Lo que sigue funciona en Vue 1, pero en Vue 2 los filtros están en desuso y verá: "La propiedad o el método" inverso "no están definidos en la instancia, pero se hace referencia durante el procesamiento". Vea la respuesta de tdom_93 para vue2.

Podría crear un filtro personalizado para devolver los artículos en orden inverso:

Vue.filter('reverse', function(value) {
  // slice to make a copy of array, then reverse the copy
  return value.slice().reverse();
});

Entonces utilízalo en la v-for expresión:

<ol>
    <li v-for="item in items | reverse" track-by="id">

https://jsfiddle.net/pespantelis/sgsdm6qc/

https://ffff65535.com

Estoy usando Vue JS para hacer enlaces de viewmodel. En mi objeto de data tengo una serie de elementos que están ordenados en orden ascendente (de más antiguo a más reciente) y me gustaría mantenerlo así por razones basadas en el código.

var v = new Vue({
    el: '#app',
    data: {
        items: [
            {id: 51,  message: 'first'},
            {id: 265, message: 'second'},
            {id: 32,  message: 'third'}
        ],
    }
}

Sin embargo, cuando muestro la matriz en la plantilla, me gustaría invertir el orden para que sea descendente (de la más antigua a la más antigua). Intenté lo siguiente:

<ol>
    <li v-for="item in items | orderBy -1" track-by="id">

Esto no funcionó ya que el filtro orderBy parece requerir un nombre de campo como su primer argumento.

¿Hay alguna forma de lograr esto en la plantilla usando la sintaxis v-for usando el filtro orderBy ? ¿O voy a tener que crear un filtro reverse personalizado?


Actualización para Vue2

Quiero mostrar algunas formas en que puedes trabajar con datos y no usar filtros, ya que están en desuso en Vue2:

dentro de propiedad computada

Use propiedades computadas en lugar de filtros, lo cual es mucho mejor porque puede usar esos datos en cualquier parte del componente, no solo en la plantilla: jsFiddle

computed: {
    reverseItems() {
        return this.items.slice().reverse();
  }     
}

dentro de la propiedad getter Vuex

Si está utilizando Vuex, y almacena sus datos en el objeto store.state . La mejor manera de realizar una transformación con los datos almacenados en el estado es hacerlo en el objeto getters ( por ejemplo, filtrando a través de una lista de elementos y contándolos, en orden inverso, etc. )

getters: {
    reverseItems: state => {
        return state.items.slice().reverse();
    }
}

y recuperar el estado de los captadores en la propiedad computada componente:

computed: {
    showDialogCancelMatch() {
        return this.$store.state.reverseItems;
    }
}

Para mi caso de uso (que es cierto, aparentemente diferente al OP ...) quería tener los índices del Array en orden inverso en el "bucle" de v-for.

Mi solución fue crear un método de aplicación Vue reverseRange(length) que devuelva una matriz de enteros de longitud-1 a 0. Luego utilicé eso en mi directiva v-for y simplemente me referí a los elementos de mi matriz como myArray[index] cada vez Lo necesitaba.

De esa manera, los índices estaban en orden inverso y luego pude usarlos para acceder a los elementos del Array.

Espero que esto ayude a alguien que aterrizó en esta página con este sutil matiz en sus requisitos como yo.


Solución simple y concisa:

<li v-for="item in items.slice().reverse()">
//do something with item ...
</li>




vue.js