Comment basculer une classe dans vue.js pour les éléments rendus par liste ? Cette question est une extension de cette question bien répondue. Je veux pouvoir basculer chaque élément individuellement ainsi que tous les basculer. j'ai tenté une solution avec le code ci-dessous mais il semble fragile et ne semble pas fonctionner.

Une solution différente serait d'utiliser une seule variable pour basculer tous les éléments, puis chaque élément a une variable locale qui peut être activée et désactivée, mais aucune idée de la façon de l'implémenter.

// html element
<button v-on:click="toggleAll"></button>
<div v-for="(item, i) in dynamicItems" :key=i
     v-bind:class="{ active: showItem }"
     v-on:click="showItem[i] = !showItem[i]">
</div>

//in vue.js app
//dynamicItems and showItem will be populated based on API response
data: {
    dynamicItems: [], 
    showItem: boolean[] = [],
    showAll: boolean = false;
},
methods: {
    toggleAll(){
        this.showAll = !this.showAll;
        this.showItem.forEach(item => item = this.showAll);
    }
}
2
MJ_Wales 15 mars 2019 à 14:59

2 réponses

Meilleure réponse

Voici le petit exemple à réaliser que vous souhaitez. Ceci est juste une alternative et non une copie exacte de votre code.

var app = new Vue({
el:'#app',
data: {
    dynamicItems: [
      {id:1,name:'Niklesh',selected:false},
      {id:2,name:'Raut',selected:false}
    ],
    selectedAll:false,
},
methods: {
    toggleAll(){
      for(let i in this.dynamicItems){
         this.dynamicItems[i].selected = this.selectedAll;
      }
    }
}
});
.active{
  color:blue;
  font-size:20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.9/vue.js"></script>
<div id="app">
<template>
<input type="checkbox" v-model="selectedAll" @change="toggleAll"> Toggle All 
<div v-for="(item, i) in dynamicItems">
  <div :class='{active:item.selected}'><input type="checkbox" v-model="item.selected">Id : {{item.id}}, Name: {{item.name}}</div>
</div>
{{dynamicItems}}
</template>
</div>
2
Niklesh Raut 15 mars 2019 à 12:13

Je pense que tout ce que vous devez faire est ceci

v-bind:class="{ active: showItem || showAll }"

Et supprimez la dernière ligne de toggleAll

Vous devez également utiliser Vue.set lors de la mise à jour des valeurs de tableau, en tant qu'éléments de tableau ne sont pas réactifs.

1
Radu Diță 15 mars 2019 à 12:11