如何使用<b-button>唯一 id 单击后切换文本

Question

我正在使用BootstrapVue.我的模板中有一个b-button，我想在单击它后切换其文本。

我正在将我生成的唯一item.id传递给我的脚本，但这在每b-button text都会被更改的情况下是行不通的，而不仅仅是我正在单击的那个。这里有什么问题？

您应该能够复制，粘贴代码，它应该可以解决。

请注意，它只是我的代码的副本，在所需的代码上缩短了，所以代码不应该改变这么多。

我的模板：

<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>

我的脚本：

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);
}
}

Answer 1

1. 与其使用单独的数组来存储不同的字段，不如将它们移动到inputs[]对象数组中，以便v-for中的每个item都有自己的id、collapsed和btnText。

2. 然后更新changeText()以引用item参数中的字段。

3. 同时更新模板以使用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>

演示

Answer 2

你可以为 btnText 维护一个对象，比如

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);
}
}

你的模板应该是这样的

<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>