1
votes

Comment exclure un élément d'un tableau?

J'ai un v-for pour afficher toutes mes catégories. Je voudrais exclure une catégorie, cette catégorie a un id = 1. Alors, comment puis-je supprimer par Id? ou peut-être comment puis-je exclure le premier élément du tableau? que fais-je ?

<div class="list" v-for="(category,index ) in Categories" :key="category.id">

javascript vue.js

1 commentaires

fondamentalement comment puis-je obtenir tous les identifiants de catégorie> 1?

3 Réponses :

1
votes

Vous pouvez utiliser v-if .

<div class="list" v-for="(category,index ) in Categories" :key="category.id">
  <template v-if="category.id === 1">
    ...

3 commentaires

vous ne pouvez pas utiliser v-if avec v-for dans un div, vous pouvez utiliser <template> à la place <div>

Je ne comprends pas vraiment ce que tu veux dire ... désolé, je suis très nouveau dans ce domaine. où dois-je ajouter le v-if? <div class = "list" v-for = "(category, index) in Categories": key = "category.id">

pouvez-vous mettre à jour toute votre base de code dans votre question?

0
votes

Utilisez l'option de composant de propriété calculée.

computed: {
    filteredCategories: function(){
       //example ids to ignore 
       var ignore = [1, 10];
        return this.categories.filter(cat => ignore.indexOf(cat.id) === -1);
    }
}

<div class="list" v-for="(category,index ) in filteredCategories" :key="category.id">

0 commentaires

0
votes

Pour obtenir toutes les catégories avec un id supérieur à 1, le moyen le plus simple serait d'avoir un filteredCategories calculé:

data: () => ({
  Categories: []
}),
computed: {
  filteredCategories() {
    return this.Categories.filter(cat => cat.id > 1);
  }
},
mounted() {
  axios.get("path/to/your/api")
    .then(response => this.Categories = response.data);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.js"></script>
<div id="app">
  <div class="list" v-for="category in filteredCategories" :key="category.id">
    {{category.id}} - {{ category.name }}
  </div>
</div>

Vue.config.devtools = false;
Vue.config.productionTip = false;
new Vue({
  el: '#app',
  data: () => ({
    Categories: [
      {id: 1, name: 'I won\'t get rendered!'},
      {id: 2, name: 'Second category'},
      {id: 3, name: 'Third category'},
      {id: 4, name: 'Fourth category'},
      {id: 0, name: 'I won\'t get rendered, either. My id is `0`'}
    ]
  }),
  computed: {
    filteredCategories() {
      return this.Categories.filter(cat => cat.id > 1);
    }
  }
})

computed: {
  filteredCategories: {
    return this.Categories.filter(cat => cat.id > 1);
  }
}

Les avantages sont:

le tableau Categories initial n'est pas muté, donc si vous l'utilisez n'importe où ailleurs dans le composant, il contiendra toujours toutes les catégories (ce qui n'est pas vrai si vous filtrez en utilisant .splice )
le filtrage est effectué en fonction de la valeur de id et non de la position de la catégorie dans le tableau.

Voici comment obtenir les catégories à partir de l'API:

<div class="list" v-for="category in filteredCategories" :key="category.id" />

2 commentaires

oui merci, mais j'essaie de les obtenir depuis l'api, cela me semble un peu plus compliqué. voici mon code, où dois-je placer le calcul? async monté () this.Categories = wait axios.get (" localhost / wordpress / wp-json / wp / v2 / categories /" ) .then (response => {return response.data})

Réponse mise à jour. En bref: déclarez les Categories dans les data comme un tableau vide. Remplissez-le lorsque vous avez les données. Les filteredCategories fonctionneront.