web-dev-qa-db-fra.com

boucle v-for et utilisation d'un attribut de clé

Impossible de cadrer le titre de manière plus pertinente, désolé pour cela ....

  • J'ai un [] dans ma propriété data qui est rempli d'éléments avec un appel de l'API externe

  • Je boucle dans le [] en utilisant v-for sur div principale dans mon modèle et remplis la page 

  • il y a un basculable div dans chaque principal div qui est masqué par défaut et peut être affiché ou non

voici le code 

<template>

  <div>    
      // MAIN DIV
      <div v-for="(item, index) in myArray :key="index"> 
          //populate the elements using revelevant data
        <button @click="toggleDiv"">show/hide</button>

        //togglelable div
           <div v-if="displayDiv">
            //some data
        </div>
      </div>
  </div>
</template>

<script>
    export default{
        data(){
            return{
                myArray: [],
                displayDiv: false
            }
        },
        methods: {
            toggleDiv(){
                this.displayDiv = !this.displayDiv;
            }
        }

    }
</script>

Alors voici mon problème

  • quand je clique sur le bouton dans un div particulier pour afficher le div caché, tous les div cachés du reste de tous les div sont également affichés

  • comment puis-je limiter cela de sorte que seul le div masqué respectif soit basculé lorsque le bouton correspondant de ce div est cliqué

  • devrais-je utiliser l'attribut key pour laisser la vue distinguer les divs ou devrais-je utiliser n'importe quelle logique

vue.jsvuejs2vue-component
4
Vamsi Krishna

Vous devez laisser le nom de la clé et la valeur comme suit, ne le renommez pas.

<div v-for="(value, key, index) in Your-object">
  {{ index }}. {{ key }}: {{ value }}
</div>
4
Emad Adly

Le problème ici est qu’une propriété est vraie ou fausse pour ouvrir tous les divs, displayDiv , ce n’est pas per item.

    data(){
        return{
            myArray: [],
            displayDiv: false
        }
    }

Si vous ne pouvez pas modifier les éléments de données du tableau que vous recevez sur l'emplacement distant, vous pouvez simplement mettre en boucle les éléments et ajouter la propriété à chaque élément une fois que vous l'avez reçue.

Comme ça:

// I'll assume your api looks somewhat like this

 return axios.get('apirequest')
.then(function (res) {

// Create a new list 
var listOfItemsWithAddedProp = [];

// Loop all the items of the response..
for(var item of res.data){

    // ..and add one or multiple props
    item.open = false;

    // Then Push modified item to the new list
    listOfItemsWithAddedProp.Push(item);
}

// Return or set the new list to your "myArray" in your example
return listOfItemsWithAddedProp;

})

2
Cammy

Créez un nouveau composant pour votre élément individuel et encapsulez le comportement consistant à afficher l'élément ou non. 

Composant principal:

<template>

    <div v-for="item in myArray"> 
     <item :item=item>
    </div>
    ...

</template>

<script>

    import Item from './Item.vue'
    ...
    export default{
      components: {
        Item
      }
    }

</script>

Composant de l'article:

<template>
  <div>
     <button @click="toggleDiv()"">show/hide</button>
     <div v-if="displayDiv">
      ...
     </div>
  </div>
</template>



 <script>
    export default{
        props: ['item']
        data(){
            return{
                displayDiv: false
            }
        },
        methods: {
            toggleDiv(){
               this.displayDiv = !this.displayDiv;
            }
        }
    }
 </script>
1
M. Suurland
 <div v-for="(langue, index) in langues" :key="index" >
    {{langue.text}}
 </div>
0
anasmorahhib