vue.js - 在Vue中展开/折叠

我目前正在制作一个手风琴从数据来自一个服务（我做了一个对象命名为“组”，例如，清酒）。当前，我可以单击组名，它将正确隐藏/显示描述，但它将打开所有实例。我怎样才能让它打开被点击的组，而不是全部？这是我的小提琴：https://jsfiddle.net/ch609uov/1/我知道我可以在groups变量中使用open属性，但是我正在使用的actaul数据没有这个属性。所以，我需要它来处理我已经添加到VUE实例中的ISP扩展的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
}
})

如果你有任何问题，请告诉我！我对Vue还不熟悉，所以我可能没有完全解释清楚。谢谢！

最佳答案

在本地修改资源数据
有几种方法可以做到这一点，第一种方法实际上是修改从外部资源返回的数据，使每个条目都有自己的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，则它是打开的，如果不是，则关闭。
希望这有帮助！