Vuejs open/toggle 单项

Question

我使用单个文件组件并在其中一个文件中有一个列表。这个列表应该像手风琴一样工作，但据我在 Vuejs 文档中找到的，要非常容易地单独打开每个项目并不是那么容易。从 ajax 调用中检索数据（问题和答案）。我为此使用 jQuery，但想知道如何使手风琴以 Vuejs 风格工作。如有任何帮助，我们将不胜感激！

代码如下：

export default {
  name: 'faq-component',
  props: ['faqid', 'faqserviceurl', 'ctx'],
  data: function () {
    return {
     showFaq: "",
     totalFaqs: this.data,
     isOpen: true
     }
  },
  watch: {   
  'showFaq': function(val, faqid, faqserviceurl) {
   var self = this;
   $.ajax ({
             url: this.faqserviceurl,
             type: 'GET',
             data: {id: this.faqid, q: val, scope:1},
             success: function (data) { 
                self.totalFaqs = data; 
             },
             error: function () {
              $("#answer").html('Sorry');
             }    
   });
   }
  },
  methods: {
   'toggle': function() {
    this.isOpen = !this.isOpen
    
   }
  }
  
}

<template>
 <div class="card faq-block">  
  <div class="card-block">  
   <form>
    <div class="form-group">
     <input class="form-control" type="text" placeholder="Your question" id="faq" v-model="showFaq">
    </div>
   </form>  
   
   <div id="answer"></div>  
   <ul class="faq">
    <li v-for="faq in totalFaqs">
     <p class="question" v-html="faq.vraag" v-bind:class={open:isOpen} @click="isOpen = !isOpen"></p>
     <p class="answer" v-html="faq.antwoord"></p>
    </li>
   </ul>     
  </div>
 </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 
}

Vuejs open/toggle 单项

Vuejs open/toggle single item

each

toggle

vue.js