Comment inverser l’ordre d’un tableau en utilisant v-for dans Vue.js ?

Parfois, nous voulons inverser l’ordre d’un tableau en utilisant v-for dans Vue.js.

Dans cet article, nous allons voir comment inverser l’ordre d’un tableau à l’aide de v-for dans Vue.js.

Inverser l’ordre d’un tableau à l’aide de v-for dans Vue.js
Nous pouvons inverser l’ordre d’un tableau à l’aide de v-for dans Vue.js en utilisant les méthodes slice et reverse array pour copier le tableau original et l’inverser.

Par exemple, nous pouvons écrire

<template>
  <div id="app">
    <p v-for="item in items.slice().reverse()" :key="item.id">
      {{ item.message }}
    </p>
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      items: [
        { id: 51, message: "first" },
        { id: 265, message: "second" },
        { id: 32, message: "third" },
      ],
    };
  },
};
</script>

Nous appelons item.slice pour faire une copie du tableau et la retourner.

Puis nous appelons reverse pour inverser le tableau copié.

Enfin, nous utilisons v-for pour rendre les éléments du tableau.

Maintenant nous voyons :

third

second

first

Conclusion

Nous pouvons inverser l’ordre d’un tableau à l’aide de v-for dans Vue.js en utilisant les méthodes slice et reverse array pour copier le tableau original puis l’inverser.