Vue.js:折叠/展开父项中的所有元素

Question

我需要为我的Vue组件添加"expand/collapse all"功能(一些可折叠面板).

如果用户单击折叠按钮然后单击某个面板并展开它,则单击折叠按钮将不执行任何操作,因为观察的参数不会更改.

那么如何正确实现这个功能(按钮必须总是折叠和扩展组件)？

我准备了简单的例子(抱歉格式不好,在编辑器中看起来不错:():

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
  }
});

例子.