No necesitas necesariamente mantener asociado una carpeta con su estado. Una opción más práctica sería enviar a todos los elementos el id
del folder que ha pedido ser abierto (mediante $emit
) y hacer una comprobación para saber si el folder actual es el abierto para poder actualizar su clase CSS.
Ejemplo
En cada folder, ponemos una condicional para ver cuando agregar la clase open
(por ejemplo):
<li
class="folder"
:class="{open: this.folder.id === open}"
@click="openFolder"
>
</li>
Cuando se pulse sobre cada folder, se envía al padre el id de dicho folder:
openFolder() {
this.$emit('open', this.folder.id);
}
Cada folder tendrá las propiedades folder
y open
. Este último representa el id del folder que ha pedido abrirse.
props: {
open: {
type: Number,
required: true,
},
folder: {
type: Object,
required: true
},
},
Y por último, el padre, al recibir notificación que un folder quiere abrirse, actualiza su propia propiedad folderOpen
:
methods: {
onFolderOpen(id) {
this.folderOpen = id;
}
},
la cual es pasada como propiedad a cada folder:
<ul class="folders">
<folder
v-if="ready"
v-for="folder in folders"
:folder="folder"
:open="folderOpen"
@open="onFolderOpen"
/>
</ul>
Código completo
Vue.component('folder', {
template: `
<li
class="folder"
@click="openFolder"
>
<i
class="material-icons"
v-if="open !== folder.id"
>
folder
</i>
<i
class="material-icons"
v-if="open === folder.id"
>
folder_open
</i>
<label>{{ folder.name }}</label>
</li>
`,
props: {
open: {
type: Number,
required: true,
},
folder: {
type: Object,
required: true
},
},
methods: {
openFolder() {
this.$emit('open', this.folder.id);
}
},
});
const app = new Vue({
data: () => ({
folders: [],
folderOpen: -1,
ready: false,
}),
methods: {
onFolderOpen(id) {
this.folderOpen = id;
}
},
created() {
this.folders = [{
id: 0,
name: 'Proyectos',
},
{
id: 1,
name: 'Trabajo',
},
{
id: 2,
name: 'Hacking',
},
{
id: 3,
name: 'StackOverflow'
},
];
this.ready = true;
},
});
app.$mount('#app');
ul.folders {
list-style: none;
}
ul.folders li {
align-items: center;
color: #555;
cursor: pointer;
display: flex;
font-family: 'Open Sans', sans-serif;
font-size: 15px;
height: 40px;
}
ul.folders li i {
margin: 0 10px 0 0;
pointer-events: none;
}
ul.folders li label {
font-weight: 600;
pointer-events: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"/>
<div id="app">
<ul class="folders">
<folder v-if="ready" v-for="folder in folders" :folder="folder" :open="folderOpen" @open="onFolderOpen" />
</ul>
</div>