Vue开发中如何在computed计算属性内使用v-for的index索引

普通Vue计算属性默认是无参数的属性访问形式，你之前的写法一方面是计算属性本身没有接收index参数的逻辑，另一方面原有计算属性的逻辑只会返回单个匹配对象，没有和index做对应绑定，所以无法通过下标获取对应行的填充数据。可以通过以下两种方案实现需求：

方案1：计算属性返回可接收参数的函数 #

这种方案改动最小，直接调整计算属性返回一个接收index参数的函数即可：

computed: {
  Autofill() {
    // 返回接收index参数的函数
    return (index) => {
      const currentNumber = this.Number[index]
      // 无匹配数据时返回空结构避免报错
      if (!currentNumber ||!this.json) return { autofill1: '', autofill2: '' }
      // 匹配当前行number对应的json数据
      return this.json.find(item => +item.number === +currentNumber) || { autofill1: '', autofill2: '' }
    }
  }
}

模板部分对应修改调用方式即可：

<b-form-input type="text" :value="Autofill(index).autofill1"></b-form-input>
<b-form-input type="text" :value="Autofill(index).autofill2"></b-form-input>

方案2：计算属性返回匹配数组 #

如果希望利用计算属性的缓存能力减少重复执行，可以直接让计算属性返回和输入行一一对应的数组：

computed: {
  AutofillList() {
    if (!this.json) return []
    // 遍历所有输入的Number，按顺序生成对应填充数据数组
    return this.Number.map(num => {
      if (!num) return { autofill1: '', autofill2: '' }
      return this.json.find(item => +item.number === +num) || { autofill1: '', autofill2: '' }
    })
  }
}

模板部分几乎不用改动，调整调用的计算属性名即可：

<b-form-input type="text" :value="AutofillList[index].autofill1"></b-form-input>
<b-form-input type="text" :value="AutofillList[index].autofill2"></b-form-input>

注意：你现有模板代码中的<b-form-input>标签缺少闭合尖括号，修改时请补上避免渲染错误。

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