Vue Komponente toggle

Question

Ich bin ziemlich neu in Vue, arbeiten an einer FAQ-Liste Komponente, die die Antwort auf Klick auf eine Frage schaltet. Ich bin mir nicht sicher, wie man eine Klasse mit einer Vue-Komponente/mit einer Vorlage umschaltet.

Ist auch das Show-Attribut innerhalb der Daten (faq_list) eine gute Möglichkeit, dies zu tun?

Code unten.

<div id="app"> 
    <faqs :list="faq_list" :active.sync="active"></faqs> 
    <pre> {{$data| json}} </pre> 
</div> 

<template id="faq-template"> 
    <ol> 
     <li v-for="list_item in list"> 
      <div class="question"> {{list_item.question}} </div> 
      <div v-if="toggleActive" @click='toggleActive(list_item)'> 
       {{list_item.answer}} 
      </div> 
      <strong @click="removeFaq(list_item.answer)">x</strong> 
     </li> 
    </ol> 
</template> 

Vue.component('faqs', { 
     props: ['list', 'active'], 

     template: '#faq-template', 

     methods: { 
      removeFaq: function(list_item){ 
       this.list.$remove(list_item); 
      }, 

      toggleActive: function(list_item) { 
       console.log(list_item.show); 
       list_item.show = !list_item.show; 
      } 

     } 
    }); 

    new Vue({ 
     el: '#app', 

     data: { 

      active: {}, 

      'faq_list' : [ 
       { question: 'q01', answer: 'q1', show: false}, 
       { question: 'q02', answer: 'a2', show: false}, 
       { question: 'q03', answer: 'a3', show: false}, 
       { question: 'q04', answer: 'a4', show: false}, 
       { question: 'q05', answer: 'a5', show: false} 
      ] 
     } 
    }); 

Answer 1

<li v-for="list_item in list"> 
    <div class="question" @click='list_item.show = !list_item.show'> {{list_item.question}} </div> 
    <div v-if="list_item.show"> 
     {{list_item.answer}} 
    </div> 
    <strong @click="removeFaq(list_item)">x</strong> 
</li> 

1. Sie hatte v-if="toggleActive" aber es sollte v-if="list_item.show"

2. I bewegt werden die auf die Frage div klicken, so könnten Sie zeigen/die div verstecken, sonst, wenn es Sie versteckt konnte es nicht

3. vereinfachte @click='list_item.show = !list_item.show' klicken obwohl Ihr auch funktioniert :)

4. das falsche Argument Musste die Funktion remove gesendet (Sie list_item.answer gesendet, wenn Sie list_item