Vue.js：折叠/展开父级的所有元素

Question

我需要为我的 Vue 组件（一些可折叠面板）添加“全部展开/折叠”功能。

如果用户点击折叠按钮，然后点击某个面板并展开它，然后点击折叠按钮什么都不做，因为监视的参数不会改变。

那么如何正确实现这个功能（按钮必须始终折叠和展开组件）？

我准备了简单的例子（抱歉格式不正确，它在编辑器中看起来不错:():

var collapsible = {
  template: "#collapsible",
  props: ["collapseAll"],
  data: function () {
      return {
        collapsed: true
    }
  },
  watch: {
  	collapseAll: function(value) {
    	this.collapsed = value
    }
  }
}

var app = new Vue({
	template: "#app",
  el: "#foo",
  data: {
      collapseAll: true
  },
  components: {
  	collapsible: collapsible
  }
});

.wrapper {
  width: 100%;
}

.wrapper + .wrapper {
  margin-top: 10px;
}

.header {
  height: 20px;
  width: 100%;
  background: #ccc;
}

.collapsible {
  height: 100px;
  width: 100%;
  background: #aaa;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.3/vue.min.js"></script>

<div id="foo"></div>


<script type="text/x-template" id="collapsible">
 	<div class="wrapper">
    <div class="header" v-on:click="collapsed = !collapsed"></div>
    <div class="collapsible" v-show="!collapsed"></div>
	</div>
</script>


<script type="text/x-template" id="app">
	<div>
    <button v-on:click="collapseAll = true">Collapse All</button>
    <button v-on:click="collapseAll = false">Expand All</button>
 		<collapsible v-for="a in 10" v-bind:collapseAll="collapseAll" v-bind:key="a"></collapsible>
  </div>
</script>

谢谢！

Answer 1

在这种情况下，我可能会使用ref。

<button v-on:click="collapseAll">Collapse All</button>
<button v-on:click="expandAll">Expand All</button>
<collapsible ref="collapsible" v-for="a in 10" v-bind:key="a"></collapsible>

并向你的 Vue 添加方法。

var app = new Vue({
    template: "#app",
  el: "#foo",
  methods:{
    collapseAll(){
      this.$refs.collapsible.map(c => c.collapsed = true)
    },
    expandAll(){
      this.$refs.collapsible.map(c => c.collapsed = false)
    }
  },
  components: {
    collapsible: collapsible
  }
});

Example.