在BootstrapVue的v-for循环中为动态新增输入项设置唯一key/id

问题原因 #

你当前的代码在初始化和新增输入项时，没有给inputs数组的元素生成并绑定唯一_id属性，模板自然无法读取到对应值输出。

修复方案 #

可以用时间戳（低并发场景完全够用）或者自增计数器生成唯一id，在新增元素时写入对象的_id字段即可，修改后的完整代码如下：

<template>
  <div>
    <div v-for="idInput in inputs" :key="idInput._id">
      <!-- 如果要给输入框本身绑定id可以加:id属性，按需使用 -->
      <b-form-input class="col-md-6" :id="`input-${idInput._id}`"></b-form-input>#
      {{idInput._id}}
    </div>

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

<script>
export default {
  methods: {
    addInput() {
      // 用Date.now()生成唯一id，也可以替换为你自己的id生成规则
      this.inputs.push({
        _id: Date.now()
      });
    }
  },
  data() {
    return {
      // 初始化的第一个输入项也要绑定_id
      inputs: [{
        _id: Date.now()
      }],
    }
  }
}
</script>

如果你需要更规范的uuid格式的唯一id，可以自己引入uuid生成库替换Date.now()即可。

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