Question

我正在使用Vuetify生成文本字段，并且我将它们v建模为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"
 ],
}
}

Answer 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>

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

1 个答案: