Vue組件切換

Question

我對Vue相當陌生，正在研究一個常見問題列表組件，它可以在點擊問題時切換答案。 我不知道如何切換一個類與Vue組件/模板。

此外，在數據（faq_list）中有show屬性是一個很好的方法來做到這一點？

下面的代碼。

<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. 你有v-if="toggleActive"但它應該是v-if="list_item.show"

2. 我感動的點擊最多的問題DIV所以你可以顯示/隱藏DIV，否則一旦有人隱藏你無法點擊它

3. 簡化@click='list_item.show = !list_item.show'雖然你的作品也是:)

4. 曾派人到刪除功能的錯誤的參數（你送list_item.answer當你想要list_item