仅切换手风琴单击的vue.js [英] toggle only accordion clicked vue.js
问题描述
我正在构建一个简单的vue手风琴,当我单击一个手风琴时,它们都打开了,这不是我要遵循的行为.有没有办法只打开一个被点击?我以为这个"可以解决这个问题,但是我没有运气.
I am building a simple vue accordion, when I click one accordion they all open and that is not the behavior I am after. Is there a way to only open the one clicked? I assumed "this" would take care of that but I am no having luck.
html:
<div id="accordion" class="accordion-container">
<div class="accordion" :class="accordionClasses">
<div class="accordion-header" @click="toggleAccordion">
Accordion 1
<i class="fal fa-plus" />
<!-- <i class="fal fa-minus" /> -->
</div>
<div class="accordion-body">
<div class="accordion-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong></div>
</div>
</div>
<div class="accordion" :class="accordionClasses">
<div class="accordion-header" @click="toggleAccordion">
Accordion 2
<i class="fal fa-plus" />
<!-- <i class="fal fa-minus" /> -->
</div>
<div class="accordion-body">
<div class="accordion-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong></div>
</div>
</div>
<div class="accordion" :class="accordionClasses">
<div class="accordion-header" @click="toggleAccordion">
Accordion 3
<i class="fal fa-plus" />
<!-- <i class="fal fa-minus" />-->
</div>
<div class="accordion-body">
<div class="accordion-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong></div>
</div>
</div>
</div>
js:
export default {
name: 'trial-page',
data() {
return {
isOpen: false
};
},
computed: {
accordionClasses: function() {
return {
'is-closed': !this.isOpen
};
}
},
methods: {
toggleAccordion: function() {
this.isOpen = !this.isOpen;
}
}
};
推荐答案
如果要跟踪打开或关闭哪个手风琴节,则无需为每个手风琴节指定一个索引并将其用作跟踪工具.在创建列表时,强烈建议您使用 v-for
.
If you want to keep track of which accordion section is open or closed, you need t give each one an index and use that as a tracking tool. As you are creating a list I strongly recommend you use v-for
.
总体而言,您的代码可以进行一些重构,因此我将其重写一下,以举例说明您的目标:
Overall your code could do with some refactoring so I rewrote it a bit to give you an example of what you should be aiming for:
<template>
<div id="accordion" class="accordion-container">
<div
v-for="(item, index) in items"
:key="index"
:class="[
'accordion',
{ 'is-open': isOpen.includes(index) }
]"
>
<div class="accordion-header" @click="toggleAccordion(index)">
{{ item.title }}
<i v-if="!isOpen.includes(index)" class="fal fa-plus"/>
<i v-else class="fal fa-minus"/>
</div>
<div class="accordion-body">
<div class="accordion-content">
{{ item.text }}
<strong>{{ item.sub }}</strong>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "trial-page",
data() {
return {
items: [
{
title: "Accordion 1",
text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
sub: "Pellentesque risus mi"
},
{
title: "Accordion 2",
text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
sub: "Pellentesque risus mi"
},
{
title: "Accordion 3",
text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
sub: "Pellentesque risus mi"
}
],
isOpen: []
};
},
methods: {
toggleAccordion(index) {
if (this.isOpen.includes(index)) {
this.isOpen = this.isOpen.filter(i => i !== index);
return;
}
this.isOpen.push(index);
}
}
};
</script>
<style>
.accordion:not(.is-open) .accordion-body {
display: none;
}
</style>
这里是一个 codepen
进行测试: https://codesandbox.io/s/blazing-water-icpxw
Here is a codepen
to test it out: https://codesandbox.io/s/blazing-water-icpxw
您可能需要调整一些内容以适合您的需求.
You may need to adjust somethings to suit your needs.
这篇关于仅切换手风琴单击的vue.js的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!