Estoy trabajando con BootstrapVue . Tengo un b-button en mi plantilla donde quiero cambiar su texto después de hacer clic en él.
Estoy pasando mi item.id único generado a mi secuencia de comandos, pero esto no funciona en el caso de que se cambie cada b-button text y no solo en el que estoy haciendo clic. ¿Cuál es el problema aquí?
Debería poder copiar, pegar el código y debería funcionar.
Tenga en cuenta que es solo una réplica de mi código abreviado en el código necesario, por lo que el código no debe cambiarse tanto.
Mi plantilla:
<div v-for="item in inputs" :key="item.id"> <b-button @click="changeText(item)">{{btnText}}</b-button> </div> <b-button @click="addInput">Add Input</b-button>Mi guion:
data() { return { collapsed: [true], id: null, inputs: [{id: 0}], btnText: "It's false", } }, methods: { changeText(item) { this.collapsed[item.id] = !this.collapsed[item.id] if(this.collapsed[item.id] === true) { this.btnText = "It's true" } else if(this.collapsed[item.id] === false) { this.btnText = "It's false" } }, addInput() { this.inputs.push({ id: this.id += 1, }) this.collapsed.push(true); } }En lugar de tener matrices separadas para almacenar los diferentes campos, muévalos a la matriz de objetos de inputs[] , de modo que cada item en v-for tenga su propio id , collapsed y btnText .
Luego actualice changeText() para hacer referencia a los campos dentro del argumento del item .
También actualice la plantilla para usar el campo item.btnText .
<script> export default { data() { return { inputs: [{ id: 0, collapsed: true, btnText: `It's true` }], 1️⃣ } }, methods: { changeText(item) { item.collapsed = !item.collapsed 2️⃣ if (item.collapsed) { item.btnText = `It's true` } else { item.btnText = `It's false` } }, addInput() { this.inputs.push({ 1️⃣ id: this.id++, collapsed: true, btnText: `It's true`, }) }, }, } </script> <template> <div> <div v-for="item in inputs" :key="item.id"> 3️⃣ <b-button @click="changeText(item)">{{ item.btnText }}</b-button> </div> <b-button @click="addInput">Add Input</b-button> </div> </template>Puede mantener un objeto para btnText como
data() { return { collapsed: [false], id: null, inputs: [{id: 0}], btnText: {0: "It's false"} //Change added } }, methods: { changeText(item) { this.collapsed[item.id] = !this.collapsed[item.id] if(this.collapsed[item.id] === true) { this.btnText[item.id] = "It's true"; //Change added } else if(this.collapsed[item.id] === false) { this.btnText[item.id] = "It's false"; //Change added } }, addInput() { this.inputs.push({ id: this.inputs.length, // Change added }) this.btnText[this.inputs.length] = 'It's false'; //Change added this.collapsed.push(true); } }y su plantilla debe ser como
<div v-for="item in inputs" :key="item.id"> <b-button @click="changeText(item)">{{btnText[item.id]}}</b-button> <!-- Change added --> </div> <b-button @click="addInput">Add Input</b-button>