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

Posted 2023-02-23

【中文标题】如何遍历这些输入字段，但每个输入都有自己的状态？

【英文标题】：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"
 ],

【参考方案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>