Vue.js：摺疊/展開父級的所有元素

Question

我需要爲我的Vue組件（某些可摺疊面板）添加「展開/摺疊全部」功能。

如果用戶單擊摺疊按鈕，然後單擊某個面板並展開它，然後單擊摺疊按鈕將不會執行任何操作，因爲觀看的參數不會更改。

那麼如何正確地實現這個功能（按鈕必須總是摺疊和展開組件）？

我準備簡單的例子（對不起，壞的格式，它會在編輯器不錯:(）：

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

 
var app = new Vue({ 
 
\t template: "#app", 
 
    el: "#foo", 
 
    data: { 
 
     collapseAll: true 
 
    }, 
 
    components: { 
 
    \t 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"> 
 
    \t <div class="wrapper"> 
 
    <div class="header" v-on:click="collapsed = !collapsed"></div> 
 
    <div class="collapsible" v-show="!collapsed"></div> 
 
\t </div> 
 
</script> 
 

 

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

感謝

Answer 1

這是一個情況下我可能會使用a 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。