Estoy trabajando con BootstrapVue. A mi problema: tengo un v-for en mi plantilla en el que tengo dos buttons .
Recorrer mi v-for mi v-if no genera IDs únicas y después de hacer clic en un botón, cada botón se activará (¡desde Open me! Close me! y al revés) .
¿Cómo puedo lograr que cada botón solo se active y no afecte al otro?
Creo que tengo que usar mi n de mi v-for pero en realidad no sé cómo vincular esto a un v-if ...
¡Gracias por adelantado!
<template> <div> <div v-for="n in inputs" :key="n.id"> <b-button v-if="hide" @click="open()">Open me!</b-button> <b-button v-if="!hide" @click="close()">Close me! </b-button> </div> <div> <b-button @click="addInput">Add Input</b-button> </div> </div> </template> <script> export default { data() { return { id: null, inputs: [{ id: 0 }], hide: true, }; }, methods: { open() { this.hide = false }, close() { this.hide = true }, addInput() { this.inputs.push({ id: this.id += 1; }) } } }; </script>Todo parece estar bien. Para manejar cada disparador de botón, puede mantener un objeto así:
<script> export default { data() { return { inputs: [{id: 0, visible: false}], }; }, methods: { open(index) { this.inputs[index].visible = false }, close(index) { this.inputs[index].visible = true }, addInput() { this.inputs.push({id: this.inputs.length, visible: false}); } } }; </script>y su plantilla debe ser como
<template> <div> <div v-for="(val, index) in inputs" :key="val.id"> <b-button v-if="val.visible" @click="open(index)">Open me!</b-button> <b-button v-if="!val.visible" @click="close(index)">Close me! </b-button> </div> </div> </template>Editar:
No necesita insertar una identificación cada vez que crea una fila, en su lugar puede usar la clave como identificación. Tenga en cuenta que las inputs son un objeto y no una matriz, por lo que incluso si desea eliminar una fila, puede simplemente pasar el índice y eliminarlo.
Crearía una matriz de objetos. Use un valor booleano como propiedad para mostrar u ocultar el elemento en el que se hizo clic.
var app = new Vue({ el: '#app', data: { buttons: [] }, created () { this.createButtons() this.addPropertyToButtons() }, methods: { createButtons() { // Let's just create buttons with an id for (var i = 0; i < 10; i++) { this.buttons.push({id: i}) } }, addPropertyToButtons() { // This method add a new property to buttons AFTER its generated this.buttons.forEach(button => button.show = true) }, toggleButton(button) { if (button.show) { button.show = false } else { button.show = true } // We are changing the object after it's been loaded, so we need to update ourselves app.$forceUpdate(); } } }) <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <template> <div> <div v-for="button in buttons" :key="button.id"> <button v-if="button.show" @click="toggleButton(button)">Open me!</button> <button v-if="!button.show" @click="toggleButton(button)">Close me! </button> </div> </div> </template> </div>Si te entiendo bien, tal vez usar index:
new Vue({ el: '#demo', data() { return { hide: null, }; }, methods: { open(n) { this.hide = n }, close() { this.hide = null } } }) Vue.config.productionTip = false Vue.config.devtools = false <link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" /> <link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" /> <script src="//unpkg.com/vue@latest/dist/vue.min.js"></script> <script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script> <div id="demo"> <div> <div v-for="n in 10" :key="n"> <b-button v-if="!hide" @click="open(n)">Open me! {{n}}</b-button> <b-button v-if="hide === n" @click="close()">Close me! {{n}}</b-button> </div> </div> </div>