Vue 3 中的字符串输入数组？

Question

我正在尝试使用 Vue 3 呈现一个表单，其中包含文本输入字段的列表。这些字段映射到具有固定长度的

string[]

。我希望能够将每个字段的

v-model

设置为数组中相应的字符串。到目前为止，我的代码看起来像这样（对于视图本身）：

<template
    v-for="(myValue, index) in myValues"
    :key="myValue"
>
    <input
        type="text"
        class="form-control form-control-solid mb-3"
        :placeholder="'Choice #' + (index + 1)"
        v-model="myValues[index]"
    />
</template>

myValues

属性在我的组件的设置方法中被声明为

ref<string[]>

。这种形式呈现完美。但是，我发现当我在其中一个

<input />

字段中输入文本时，它只允许我在将焦点移离该字段之前输入单个字符。我必须再次单击该框，然后才能输入另一个单个字符。如果删除

v-model

声明，我可以在字段中输入任意数量的文本。

这是什么原因造成的？我觉得这与我正在更新数组中的值有关，但我不确定该怎么办。有没有一种方法可以处理这种用例，我可以一次输入多个字符，但带有

v-model

？

Answer 1

您不应该将

myValue

作为

:key

传递到循环。

这样的东西应该效果很好

<input
  v-for="(myValue, index) in myValues"
  :key="myValue.id"
  type="text"
  class="mb-3"
  :placeholder="'Choice #' + (index + 1)"
  v-model="myValues[index]"
/>

或者，您也可以使用

v-model.lazy

，但将对象传递给

:key

仍然是一个不好的做法。

感谢这个答案。