Vuejs ouvrir/basculer élément unique

Question

Je travaille avec des composants de fichier unique et j'ai une liste dans l'un d'entre eux. Cette liste devrait fonctionner comme un accordéon, mais autant que je peux trouver dans les docs de Vuejs, il n'est pas si facile de faire ouvrir chaque élément séparément très facilement. Les données (questions et réponses) sont extraites d'un appel ajax. J'utilise jQuery pour ça, mais j'aimerais savoir comment je peux faire fonctionner l'accordéon en mode Vuejs. Toute aide serait appréciée!

Voici le code:

export default { 
 
    name: 'faq-component', 
 
    props: ['faqid', 'faqserviceurl', 'ctx'], 
 
    data: function() { 
 
    return { 
 
    \t showFaq: "", 
 
    \t totalFaqs: this.data, 
 
    \t isOpen: true 
 
    } 
 
    }, 
 
    watch: { \t 
 
\t 'showFaq': function(val, faqid, faqserviceurl) { 
 
\t \t var self = this; 
 
\t \t $.ajax ({ 
 
      url: this.faqserviceurl, 
 
      type: 'GET', 
 
      data: {id: this.faqid, q: val, scope:1}, 
 
      success: function (data) { 
 
       self.totalFaqs = data; 
 
      }, 
 
      error: function() { 
 
       \t $("#answer").html('Sorry'); 
 
      } \t \t \t 
 
\t \t }); 
 
\t } 
 
    }, 
 
    methods: { 
 
\t 'toggle': function() { 
 
\t \t this.isOpen = !this.isOpen 
 
\t \t 
 
\t } 
 
    } 
 
    
 
}

<template> 
 
\t <div class="card faq-block"> \t \t 
 
\t \t <div class="card-block"> \t \t 
 
\t \t \t <form> 
 
\t \t \t \t <div class="form-group"> 
 
\t \t \t \t \t <input class="form-control" type="text" placeholder="Your question" id="faq" v-model="showFaq"> 
 
\t \t \t \t </div> 
 
\t \t \t </form> \t \t 
 
\t \t \t 
 
\t \t \t <div id="answer"></div> \t \t 
 
\t \t \t <ul class="faq"> 
 
\t \t \t \t <li v-for="faq in totalFaqs"> 
 
\t \t \t \t \t <p class="question" v-html="faq.vraag" v-bind:class={open:isOpen} @click="isOpen = !isOpen"></p> 
 
\t \t \t \t \t <p class="answer" v-html="faq.antwoord"></p> 
 
\t \t \t \t </li> 
 
\t \t \t </ul> \t \t \t \t \t 
 
\t \t </div> 
 
\t </div> 
 
</template>

Answer 1

Ajouter une propriété isOpen à chaque objet dans totalFaqs et utiliser à la place de votre seule isOpen propriété des données.

<p class="question" v-html="faq.vraag" v-bind:class={open: faq.isOpen} @click="faq.isOpen = !faq.isOpen"></p> 

Si vous ne pouvez pas modifier le modèle du côté serveur, ajoutez-le côté client.

success: function (data) { 
    data.forEach(d => self.$set(d, 'isOpen', false)) 
    self.totalFaqs = data 
}