Typescript ,iterp$index] 报错问题请教

Question

  1,  下面的代码,运行正常,便是ts会报错
            <template v-for="(col, $index) in data " :key="$index">
                 <td >
                         <input v-model="item[$index]"  />
                  </td>
             </template>
 item[$index] 这个位置报错,
  报错信息:元素隐式具有 "any" 类型，因为类型为 "string | number" 的表达式不能用于索引类型 "Rules"。
  在类型 "Rules" 上找不到具有类型为 "string" 的参数的索引签名。ts(7053)
      


  2, 于是我改成这样
              <template v-for="(col, $index) in data " :key="$index">
                       <td >
                             <input v-model="item[$index in keyof Rules]"  /> 
                       </td>
               </template>

item[$index in keyof Rules]"还是报错,  
报错信息: v-model value must be a valid JavaScript member expression.vue(42)

Answer 1

哥哥第一个错误是因为 TypeScript 无法确定 item 数组中的元素类型。您可以显式设置其类型，以便 TypeScript 能够知道该数组包含什么类型的值。例如：

// 假设 item 数组中的元素类型为 string
item: Array<string> = [];

第二个错误是因为 v-model 只接受合法的 JavaScript 成员表达式，而 $index in keyof Rules 并不符合这个要求。您可以将 v-model 表达式改为另一个变量，并在 JavaScript 中使用此变量来更新 item 数组的对应元素。例如：

<template v-for="(col, $index) in data" :key="$index">
  <td>
    <input :value="item[$index]" @input="updateItem($index, $event.target.value)" />
  </td>
</template>

// 在 Vue 组件中添加 updateItem 方法
updateItem(index: number, value: string) {
  // 更新 item 数组中对应的元素
  this.item.splice(index, 1, value);
}

哥哥你注意一下，在这种情况下，您需要在 JavaScript 中使用 splice 方法更新 item 数组的值，而不是通过修改数组索引来进行更新。