Vuejs単一アイテムのオープン/トグル

Question

私は単一のファイルコンポーネントを扱い、そのうちの1つのリストを持っています。このリストはアコーディオンのように機能するはずですが、私がVuejsのドキュメントで見つけることができる限り、各項目を非常に簡単に別々に開くことは簡単ではありません。データ（質問と回答）は、ajax呼び出しから取得されます。私はそのためにjQueryを使用していますが、どのようにアコーディオンをVuejsスタイルにすることができるかを知りたいと思います。どんな助けもありがとう！

ここでは、コードです：

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

totalFaqs内の各オブジェクトにisOpenプロパティを追加し、代わりに、データのあなたの単一isOpen性質のものを使用しますが。

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

サーバー側からモデルを変更できない場合は、クライアント側を追加します。

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