BootstrapVue中点击带唯一id的b-button后如何仅切换当前按钮文本

数据老陈

2026-9-28

问题根因

所有按钮共用了全局的btnText状态：你在data中声明的btnText是组件全局共享的变量，所有v-for循环渲染的按钮都绑定了这个值，只要修改它所有按钮的文本都会同步变化，没有和单个按钮的唯一id做绑定。
补充隐性问题：你初始data中的id赋值为null，首次调用addInput时计算得到的id会是NaN，会导致后续索引collapsed数组出错。

最小改动解决方案

对原有代码的修改量非常少，仅调整绑定逻辑和修正初始值即可：

1. 模板代码修改

仅修改按钮文本的绑定表达式，直接根据当前item对应的collapsed状态动态输出文本：

<div v-for="item in inputs" :key="item.id">
  <b-button @click="changeText(item)">{{ collapsed[item.id] ? "It's true" : "It's false" }}</b-button>
</div>

<b-button @click="addInput">Add Input</b-button>

2. 脚本代码修改

修正初始id为0，删除全局共享的btnText变量
去掉changeText中对全局btnText的赋值逻辑

data() {
  return {
    collapsed: [true],
    id: 0, // 修正初始值，避免生成NaN的id
    inputs: [{id: 0}],
  }
},

methods: {
  changeText(item) {
    this.collapsed[item.id] = !this.collapsed[item.id]
  },

  addInput() {
    this.inputs.push({
      id: this.id += 1, 
    })
    this.collapsed.push(true);
  }
}