Vue.js打开/切换单个项目 [英] Vuejs open/toggle single item

问题描述

我使用单个文件组件，并且其中一个列表。此列表应该像手风琴一样工作，但据我在Vuejs文档中所发现的，很难轻松地使每个项目分别打开。从ajax调用中检索数据（问题和答案）。我为此使用了jQuery，但想知道如何使手风琴成为Vuejs风格。任何帮助将不胜感激！

I work with single file components and have a list in one of them. This list should work like a accordion, but as far as I can find in the Vuejs docs, it's not that easy to make each item open separately very easily. The data (questions and answers) is retrieved from an ajax call. I use jQuery for that, but would like to know how I can make the accordion work Vuejs-style. Any help would be appreciated!

这里是代码：

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>

推荐答案

向 totalFaqs 中的每个对象添加 isOpen 属性，然后使用该属性代替单个<数据中的code> isOpen 属性。

Add an isOpen property to each object in totalFaqs and use that instead of your single isOpen property in data.

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

如果无法从服务器端更改模型，则在客户端添加。

If you can't change the model from the server side, then add it client side.

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

这篇关于Vue.js打开/切换单个项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！