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

【问题标题】：How to loop through these input fields but with each input having their own state?如何遍历这些输入字段，但每个输入都有自己的状态？
【发布时间】：2019-06-21 18:35:12
【问题描述】：

我正在使用 Vuetify 生成文本字段，并且我将它们建模为 textFieldState 但发生的情况是每个文本 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"
 ],
}
}

【问题讨论】：

标签： javascript vue.js vue-component vuetify.js nuxt.js

【解决方案1】：

我推荐如下代码结构，textFields数组中的每一项都有value和state两个属性，所以将value绑定到value属性，将state绑定到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>

【讨论】：