Vue中v-for遍历场景下如何给b-form-input绑定数组对应下标的值

首先明确两个核心前提：

1. v-model是Vue的双向绑定语法糖，已经内置了:value和输入事件的绑定逻辑，二者不能同时使用，否则会出现绑定冲突
2. 你不需要嵌套额外的v-for，外层循环的indexChild和值数组的下标完全是一一对应关系，直接按下标取值即可

实现步骤 #

1. 先将你的值数组定义为组件的响应式数据，示例如下（Vue3组合式API写法，Vue2对应写在data函数返回值里即可）：

import { ref } from 'vue'

// 你原有遍历用的json数组
const json = ref([/* 你的原有json数据 */])
// 输入框绑定用的值数组，必须声明为响应式才能正常双向绑定
const inputValList = ref(['7011412', '7012912', '7689012'])

2. 修改模板代码，直接用indexChild作为下标取值绑定：

<template>
  <div v-for="(item, indexChild) in json" :key="indexChild">
    <div class="mt-2">Input</div>
    <b-form-input v-model="inputValList[indexChild]" type="number"></b-form-input> 
  </div>
</template>

注意事项 #

• 如果只需要单向展示值不需要用户修改，把v-model替换为:value="inputValList[indexChild]"即可
• 要保证json数组和inputValList数组长度一致，避免下标越界取不到对应值
• 之前嵌套v-for不生效的原因是你在每个外层循环项里遍历了整个值数组，会导致每一行都重复渲染多个输入框，不符合一一绑定的需求

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