如何拼接函数接收的index参数 实现v-for循环中对应输入框禁用功能

你原来的写法是错误的，核心问题有两个：

1. 模板中循环生成的文本输入框id是固定的hour[]，没有和索引绑定，因此jQuery选择器无法匹配到对应行的输入框，就算要按你的思路用jQuery实现，也需要先把id动态绑定索引。
2. 在Vue中直接用jQuery操作DOM不符合框架设计理念，不仅维护成本高，也容易出现数据和DOM状态不一致的问题，更推荐用Vue数据驱动的方式实现需求。

正确实现方案 #

方案1：在items的子项中新增禁用状态字段（最推荐）

直接给每一行的item绑定独立的禁用状态，通过数据变更自动更新DOM状态：

1. 模板修改：

<tr v-for="(item, i) of items" :key="i">
    <td><input type="text" name="hour[]" :disabled="item.isDisabled"></td>
    <td><input type="checkbox" name="disable" @click="toggleDisabled(i)"></td>
</tr>

2. 逻辑修改：

// 初始化items时给每个子项新增isDisabled字段，默认未禁用
this.items = this.items.map(item => ({
  ...item,
  isDisabled: false
}))

// 方法定义
methods: {
  toggleDisabled(index) {
    // 切换当前行的禁用状态
    this.items[index].isDisabled = !this.items[index].isDisabled
  }
}

方案2：单独维护禁用状态数组

如果不想修改原有items的结构，可以单独维护一个存储禁用状态的数组：

1. 模板修改：

<tr v-for="(item, i) of items" :key="i">
    <td><input type="text" name="hour[]" :disabled="disabledList[i]"></td>
    <td><input type="checkbox" name="disable" @click="toggleDisabled(i)"></td>
</tr>

2. 逻辑修改：

data() {
  return {
    items: [],
    disabledList: []
  }
},
// 拿到items数据后初始化禁用状态数组
initItems() {
  // 假设这里是你请求获取items数据的逻辑
  this.items = 获取到的items数据
  this.disabledList = new Array(this.items.length).fill(false)
},
methods: {
  toggleDisabled(index) {
    // 响应式更新数组对应位置的状态
    this.$set(this.disabledList, index, !this.disabledList[index])
  }
}

如果你一定要沿用jQuery的实现方式，需要先修改模板的id绑定：

<!-- 动态给每个输入框绑定带索引的id -->
<input type="text" name="hour[]" :id="`hour_${i}`">

再修改选择器：

disabled(index){    
    $(`#hour_${index}`).attr('disabled', true);
}

但强烈不推荐这种混合写法，会大幅提升代码维护成本。

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