在 Vue 中展开/折叠

Question

我目前正在从来自服务的数据制作手风琴(例如，我创建了一个名为"groups"的对象(。目前，我可以单击组名称，它将正确隐藏/显示描述，但是它会打开所有实例。如何使其打开被单击的组，而不是全部？

这是我的小提琴：https://jsfiddle.net/ch609uov/1/

我知道我可以在我的组 var 中使用 open 属性，但是我正在使用的实际数据没有该属性。所以，我需要它与我添加到我的 Vue 实例中的 isExpanded prop 一起工作。

var groups = {
"GROUP A": {
"name": "GROUP A",
"open": false,
"desc": "description 1",
"heading": "test",
"items": [
"item 1"
]
},
new Vue({
el: ".vue",
data: {
groups: groups,
heading: "Plan Communications",
isExpanded: false
}
})

Answer 1

在本地修改资源数据

有几种方法可以做到这一点，第一种方法实际上是修改从外部资源返回的数据，使每个条目都有自己的open属性：

let serviceDataExample = [{title: "some title 1"}, {title: "some title 2"}, {title: "some title 3"}];
serviceDataExample.forEach(obj => {
	obj.open = false;
});
console.log(serviceDataExample);
// assign to your data object with `this` and use the open 
// attribute individually in the template

在上面，serviceDataExample只是数据可能外观的模拟表示。

上述解决方案的缺点是，每次从资源获取新数据时，都必须在将其分配给数据对象之前重新运行forEach。

---

无需在本地修改资源数据

这样做可以确保您永远不必使用显示设置弄乱原始(本地(资源数据：

var groups = {
"GROUP A": {
"name": "GROUP A",
"open": false,
"desc": "description 1",
"heading": "test",
"items": [
"item 1"
]
},
"GROUP B": {
"name": "GROUP B",
"open": false,
"desc": "description 2",
"items": [
"item 1",
"item 2",
"item 3",
"item 4",
"item 5",
"item 6",
"item 7"
]
},
"GROUP C": {
"name": "GROUP C",
"open": false,
"desc": "description 3",
"items": [
"item 1",
"item 2",
"item 3",
"item 4",
"item 5"
]
},
"GROUP D": {
"name": "GROUP D",
"open": false,
"desc": "description 4",
"items": [
"item 1",
"item 2",
"item 3",
"item 4",
"item 5",
"item 6",
"item 7"
]
},
"GROUP E": {
"name": "GROUP E",
"open": false,
"desc": "description 5",
"items": [
"item 1",
"item 2",
"item 3",
"item 4",
"item 5"
]
}
}
new Vue({
el: ".vue",
data: {
groups: groups,
heading: "Plan Communications",
// isExpanded: false,
expandedGroup: []
},
methods: {
isExpanded(key) {
	return this.expandedGroup.indexOf(key) !== -1;
},
toggleExpansion(key) {
	if (this.isExpanded(key))
	    this.expandedGroup.splice(this.expandedGroup.indexOf(key), 1);
else
	    this.expandedGroup.push(key);
}
}

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div class="container vue">
<div v-for="(group, key) in groups"> 
   <a @click="toggleExpansion(key)" >{{group.name}}</a>
   <ul v-show="isExpanded(key)">
<li>{{group.desc}}</li>
</ul>
<hr>
</div>
</div>

在这里，我们正在创建一个外部数据属性，以便跟踪展开的组的索引。如果group的索引存在于本地expandedGroup中，则它是开放的，如果不是，则关闭。

希望这有帮助！