访问数组中迭代的元素 ID 的正确语法是什么？

Question

我在名为 hour[i] 的输入字段旁边有一个名为 disable 的复选框。

然后有一个 add 按钮可以添加一个新行（将包含完全相同的元素）。

选中任何行中的复选框时，应该仅禁用该特定行中的输入字段。

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

<script>
export default {
  data() {
    return {
      timesheet: {
        items: [ {disabled: false} ],
      }
      disabled: (item) => { },
    };
  },
};
</script>

如何完成 disabled() 功能以禁用 hour 的输入？

disabled(index){
    

}

我试过这个，但没用：

$('#hour['+index+']').attr('disabled', true);

语法中缺少什么？

Answer 1

首先你应该定义一个变量存储索引的值：inputNumber

<input
        type="text" 
        name="hour[]"
        id="hour[]"
        :disabled="hour[i] === hour[inputNumber]"
    >

disabled(index){
this.inputNumber = index

}

Answer 2

这里有几处你做错了。首先，由于项目位于 timesheet 的 items 属性中，您应该使用 "(item, i) of timesheet.items" 来遍历它们。您需要在此处添加密钥。索引通常不是很好的键，但由于这个应用程序很简单，我们可以使用索引作为键。

<template>
  <div>
    <tr v-for="(item, i) of timesheet.items" :key="i">
    ...
  </div>
</template>

其次，为了添加新项目，添加项目按钮应该将新的（启用的）项目推送到项目数组。

<button
  type="button"
  name="add"
  class="btn btn-sm btn-primary"
  @click="timesheet.items.push({ disabled: false })"
>
  Add Item
</button>

接下来，为了在复选框值更改时禁用某个项目，您只需切换 disabled 项目属性。

<input
  type="checkbox"
  name="disable"
  @change="item.disabled = !item.disabled"
/>

你也可以通过写一个方法来做到这一点。类似于：

<script>
  export default {
    data() {
      ...
    },
    methods: {
      toggle: (item) => {
        item.disabled = !item.disabled;
      },
    }
  };
</script>

您可以使用 @change="toggle(item)" 调用此方法。你可以找到完整的代码 here.

访问数组中迭代的元素 ID 的正确语法是什么？

What is the correct syntax to access elements ID iterated in an array?

html

javascript

checkbox

input

vue.js