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