javascript - 如何遍历这些输入字段但每个输入都有自己的状态？

Question

我正在使用Vuetify生成文本字段，并且我将它们建模为 atextFieldState但发生的情况是每个文本 f 字段最终共享相同的状态，并且我在文本字段 1 中写入的内容泄漏到其他文本字段中。我如何做到这一点，以便每个字段都保留它自己的状态。

  <div v-if="threeTextFields">
 <label for="" v-for="textField in textFields" :key="textField">
   <v-text-field :label="textField" :value="textField" v- 
model="textFieldState"></v-text-field>
 </label>
</div>

data(){
return{
textFieldState:"",
textFields: [
   "Account ID",
   "Settings Tolerance",
   "Library Tolerance"
 ],
}
}

标签： javascriptvue.jsvue-componentvuetify.jsnuxt.js

Answer 1

我推荐下面的代码结构，textFields数组中的每一项都有两个属性valueand state，所以绑定value到 value 属性和stateto v-model：

data() {
    return {
      textFieldState: "",
      textFields: [{
          value: "Account ID",
          state: ""
        },
        {
          value: "Settings Tolerance",
          state: ""
        },
        {
          value: "Library Tolerance",
          state: ""
        }
      ],
    }

<div v-if="threeTextFields">
  <label for="" v-for="textField in textFields" :key="textField">
   <v-text-field :label="textField" :value="textField.value" v- 
model="textField.state"></v-text-field>
 </label>
</div>