I am curious about a possibility in my specific situation. I have two Vue/Element UI accordions on a page and I've created an "open all, close all" button for them. How can I assign a unique ID to each accordion and then pass that ID to the function that toggles the accordions? Alternatively, is there a way to use the same v-model with a different unique identifier so I can apply the function to each accordion individually when opening or closing all items within that particular accordion section.
https://codepen.io/mDDDD/pen/gOwxQxz
html:
<div id="app">
<template>
<div class="toggle-block">
<button @click="togglePanels()" class="toggle">
{{ activeNames.length === 4 ? "Close" : "Open" }} all
</button>
</div>
<el-collapse v-model="activeNames">
<el-collapse-item title="Panel 1" name="1">
<div class="collapse-content">
<p>Content 1</p>
</div>
</el-collapse-item>
<el-collapse-item title="Panel 2" name="2">
<div class="collapse-content">
<p>Content 2</p>
</div>
</el-collapse-item>
<el-collapse-item title="Panel 3" name="3">
<div class="collapse-content">
<p>Content 3</p>
</div>
</el-collapse-item>
<el-collapse-item title="Panel 4" name="4">
<div class="collapse-content">
<p>content 4</p>
</div>
</el-collapse-item>
</el-collapse>
<div class="spacer"></div>
<div class="toggle-block">
<button @click="togglePanels()" class="toggle">
{{ activeNames.length === 4 ? "Close" : "Open" }} all
</button>
</div>
<el-collapse v-model="activeNames">
<el-collapse-item title="Panel 1" name="1">
<div class="collapse-content">
<p>Content 1</p>
</div>
</el-collapse-item>
<el-collapse-item title="Panel 2" name="2">
<div class="collapse-content">
<p>Content 2</p>
</div>
</el-collapse-item>
<el-collapse-item title="Panel 3" name="3">
<div class="collapse-content">
<p>Content 3</p>
</div>
</el-collapse-item>
<el-collapse-item title="panel 4" name="4">
<div class="collapse-content">
<p>content 4</p>
</div>
</el-collapse-item>
</el-collapse>
</template>
</div>
js:
var Collapse = {
data() {
return {
activeNames: []
}
},
methods: {
togglePanels: function() {
if (this.activeNames.length <= 3) {
this.activeNames.push("1", "2", "3", "4");
} else if ((this.activeNames.length = 4)) {
this.activeNames = [];
}
}
}
}
var col = Vue.extend(Collapse)
new col().$mount('#app')