Vue.js：親からすべての要素を折りたたむ/展開する

Question

私のVueコンポーネント（折りたたみ可能なパネル）に「expand/collapse all」機能を追加する必要があります。

ユーザーが折りたたみボタンをクリックしてパネルをクリックして展開した後、折りたたみボタンをクリックした場合は監視されたパラメータが変更されないため何も行いません。

この機能を正しく実装するには（ボタンは常にコンポーネントを折りたたんで展開する必要があります）

私は（悪いフォーマットのため申し訳ありませんが、それはエディタで素敵に見える:(）簡単な例を準備！

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。