BootstrapVue中v-for循环值如何绑定v-if实现按钮独立触发

问题根源是所有按钮共用了同一个全局hide状态变量，修改时会触发所有绑定该变量的视图更新。只需要将状态绑定到每个循环项的独立属性即可，修改后的代码如下：

<template>
  <div>
    <div v-for="n in inputs" :key="n.id">
      <b-button v-if="n.hide" @click="open(n)">Open me!</b-button>
      <b-button v-if="!n.hide" @click="close(n)">Close me! </b-button>
    </div>

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

<script>
export default {
  data() {
    return {
      id: 0, // 初始值改为0，避免新增项id为NaN
      inputs: [{
        id: 0,
        hide: true // 每个项单独存储状态
      }]
    };
  },

  methods: {
    open(item) {
      item.hide = false // 仅修改当前传入项的状态
    },

    close(item) {
      item.hide = true // 仅修改当前传入项的状态
    },

    addInput() {
      this.inputs.push({
        id: ++this.id,
        hide: true // 新增项默认初始化状态
      })
    }
  }
};
</script>

关键修改说明 #

• 移除了全局的公共hide变量，改为在每个inputs子项中单独存储hide状态，保证每个按钮的状态互不干扰
• 模板的v-if绑定改为对应循环项的n.hide属性，仅读取当前项的状态
• 点击事件新增当前循环项n作为入参，方法内仅修改传入项的状态，不会影响其他项
• 修复了原代码中id初始值为null导致新增项id为NaN的问题，同时移除了addInput方法内对象赋值的多余分号，避免语法报错

内容的提问来源于stack exchange，提问作者patrick96