web-dev-qa-db-fra.com

Comment inverser l'ordre d'un tableau en utilisant les filtres v-for et orderBy dans Vue JS?

J'utilise Vue JS pour faire des liaisons viewmodel. Dans mon objet data, j'ai un tableau d'éléments triés par ordre croissant (du plus ancien au plus récent) et j'aimerais le conserver ainsi pour des raisons basées sur le code.

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

Cependant, lorsque j'affiche le tableau dans le modèle, j'aimerais inverser l'ordre afin qu'il soit décroissant (du plus récent au plus ancien). J'ai essayé ce qui suit:

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

Cela n'a pas fonctionné car le filtre orderBy semble exiger un nom de champ comme premier argument.

Est-il possible d'accomplir cela dans le modèle en utilisant la syntaxe v-for en utilisant le filtre orderBy? Ou vais-je devoir créer un filtre reverse personnalisé?

javascriptarraysvue.js
22
Soviut

Remarque: Ce qui suit fonctionne dans Vue 1, mais dans Vue 2, les filtres sont obsolètes et vous verra: 'La propriété ou la méthode "reverse" n'est pas définie sur le exemple, mais référencé lors du rendu. ' Voir tdom_93 réponse pour vue2.

Vous pouvez créer un filtre personnalisé pour renvoyer les éléments dans l'ordre inverse:

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

Puis utilisez-le dans l'expression v-for:

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

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

16
Pantelis Peslis

Solution simple et concise:

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

Mise à jour pour Vue2

Je veux montrer comment vous pouvez utiliser des données sans utiliser de filtres car elles sont deprecated dans Vue2:

dans la propriété calculée

Utilisez des propriétés calculées à la place des filtres, ce qui est bien meilleur, car vous pouvez utiliser ces données partout dans le composant, pas seulement dans le modèle: jsFiddle

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

inside Vuex getter propriété

Si vous utilisez Vuex et que vous stockez vos données dans l'objet store.state. La meilleure façon de transformer certaines données avec des données stockées dans un état consiste à le faire dans un objet getters (par exemple, filtrer une liste d'éléments et les compter, ordre inverse, etc.)

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

et récupérer l'état des accesseurs dans la propriété calculée du composant:

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

Pour mon cas d'utilisation (qui est certes, apparemment différent de l'OP ...), je voulais avoir les indices du tableau dans l'ordre inverse dans le v-pour "boucle".

Ma solution consistait à créer une méthode d'application Vue reverseRange(length) qui renvoie un tableau d'entiers de longueur-1 à 0. Je l'ai ensuite utilisée dans ma directive v-for et j'ai simplement appelé mes éléments Array comme étant myArray[index] chaque fois que j'en avais besoin. 

De cette façon, les index étaient dans l’ordre inverse et j’ai ensuite pu les utiliser pour accéder à des éléments du tableau.

J'espère que cela aidera quelqu'un qui a atterri sur cette page avec cette nuance subtile dans leurs exigences comme moi.

0
John Carrell

La directive v-for ne prend pas en charge l'itération en arrière. Par conséquent, si vous souhaitez trier par ordre le plus récent, vous devez ajouter un autre champ pour indiquer quand l'élément a été ajouté ou modifier id pour l'incrémenter à chaque ajout d'élément.

Ensuite, avec field étant le champ indiquant la commande ajouté:

<li v-for="item in items | orderBy 'field' -1" track-by="id">
0
ErikOlson186