Javascript Vue组件切换

我是Vue的新手，正在开发一个FAQ列表组件，它可以在单击问题时切换答案。 我不知道如何使用Vue组件/模板切换类

另外，在数据（faq_列表）中使用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}
            ]
        }
    });

{{$data | json}

{{list_item.question}
{{list_item.answer}}
x

Vue.component（‘常见问题’{
道具：['list'，'active']，
模板：“#常见问题解答模板”，
方法：{
removeFaq:函数（列表项）{
此.list.$remove（列表项）；
},
TOGGALACTIVE:功能（列表项）{
console.log（list\u item.show）；
list_item.show=！list_item.show；
}
}
});
新Vue({
el:“#应用程序”，
数据：{
活动：{}，
“常见问题列表”：[
{问题：'q01'，回答：'q1'，show:false}，
{问题：'q02'，回答：'a2'，显示：假}，
{问题：'q03'，回答：'a3'，显示：假}，
{问题：'q04'，回答：'a4'，显示：假}，
{问题：'q05'，回答：'a5'，显示：错误}
]
}
});

{{list_item.question}
{{list_item.answer}}
x

您有

v-if=“toggleActive”

，但它应该是

v-if=“list\u item.show”

我将单击向上移动到问题div，以便您可以显示/隐藏div，否则一旦它被隐藏，您就无法单击它

简化的

@click='list\u item.show=！列出项目。显示“

，尽管您的项目也适用：）

向删除函数发送了错误的参数（您发送了

list\u项。需要时回答
list\u项

{{list_item.question}
{{list_item.answer}}
x

您有

v-if=“toggleActive”

，但它应该是

v-if=“list\u item.show”

我将单击向上移动到问题div，以便您可以显示/隐藏div，否则一旦它被隐藏，您就无法单击它

简化的

@click='list\u item.show=！list\u item.show'

，尽管你的也可以：）

向删除函数发送了错误的参数（您发送了

list\u项。需要时回答
list\u项

<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>