I'm working with BootstrapVue. I have a b-button in my template where I want to switch its text after clicking on it.
I'm passing my generated unique item.id to my script, but this is not working out in the case that every b-button text will be changed and not only the one I'm clicking. What is the problem in here?
You should be able to copy, paste the code and it should work out.
Please notice that it's just a replica of my code shortened on needed code, so the code should not be changed this much.
My template:
<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>
My script:
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);
}
}
Instead of having separate arrays to store the different fields, move them into the inputs[] object array, so that each item in the v-for has its own id, collapsed, and btnText.
Then update changeText() to refer to the fields within the item argument.
Also update the template to use the item.btnText field.
<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>
You can maintain an object for btnText like
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);
}
}
and your template should be like
<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>