Vue中访问数组迭代生成元素ID的正确语法及单行输入框禁用实现

问题原因 #

你之前的方案失效主要有3个核心问题：

1. 所有hour输入框的id都是固定的hour[]，没有和行索引绑定，你的jQuery选择器$('#hour['+index+']')根本匹配不到对应元素，自然不会生效
2. 你把disabled方法定义在了data配置项中，Vue中data仅用于存放响应式状态数据，方法需要放在methods配置项中才可以被模板正常调用
3. Vue是数据驱动框架，直接操作DOM的思路不符合框架设计逻辑，动态新增行后DOM匹配更容易出问题

正确实现方案 #

推荐用Vue数据绑定的方式实现，不需要引入jQuery，逻辑更简洁：

第一步：修改模板代码 #

给输入框绑定disabled属性，直接关联对应行数据的disabled状态，复选框直接用v-model绑定状态即可：

<tr v-for="(item, i) of timesheet.items" :key="i">
    <td>
        <input
            type="text" 
            name="hour[]"
            :disabled="item.disabled"
        >
    </td>
    <td>
        <input 
            type="checkbox" 
            name="disable"
            v-model="item.disabled"
        >
    </td>
</tr>
<tr>
    <td>
        <button 
            type="button" 
            name="add" 
            class="btn btn-sm btn-primary" 
            @click="addRow"
        >Add Row
        </button>
    </td>
</tr>

第二步：修改JS逻辑 #

把方法放到methods中，新增行的逻辑改为向items数组新增对应格式的对象即可：

<script>
export default {
  data() {
    return {
      timesheet: {
        items: [ {disabled: false} ],
      }
    };
  },
  methods: {
    addRow() {
      this.timesheet.items.push({disabled: false})
    }
  }
};
</script>

如果你需要保留原来的disabled点击函数的写法 #

可以按如下方式实现：
模板中复选框部分保留点击事件绑定：

<input 
    type="checkbox" 
    name="disable"
    @click="disabled(i)"
>

在methods中添加对应方法：

methods: {
  disabled(index) {
    this.timesheet.items[index].disabled = !this.timesheet.items[index].disabled
  },
  addRow() {
    this.timesheet.items.push({disabled: false})
  }
}

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