在Vue中展开/折叠

Question

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

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

我知道我可以在我的组var中使用open属性，但是我正在处理的实际数据没有该属性。所以，我需要它来处理我已经添加到我的Vue实例中的isExpanded属性。

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中，则它是打开的，如果不存在，则它是关闭的。

希望这能有所帮助！