Question

我正在尝试使用v-for和一个模板创建多个vuetify-textfield，因此我可以轻松添加和编辑textfield，同时保持代码的整洁。

模板标签：

<template v-for="obj in textFieldProps">
  <v-text-field
    :ref="obj.ref"
    v-model="obj.model"
    :label="obj.lbl"
  ></v-text-field>
</template>

我当前的数据如下：

export default {
  data: () => ({
    name: '',
    lastname: '',
    textFieldProps: [
      { ref: 'name', model: 'name', lbl: 'Name' },
      { ref: 'lastname', model: 'lastname', lbl: 'Lastname' }
    ]
  })
}

我知道这个问题多次被问到，但是每个答案都是：动态绑定v模型通过创建一个附加数组来工作，在该数组中可以保护您的数据（在我的示例名称和姓氏中）。

但是，这感觉很笨拙。那么有什么方法可以直接将v模型绑定到this.name/this.lastname？

Answer 1

您只能将v模型绑定到一个表单输入。要将每个输入绑定到v模型，添加新的输入字段时必须创建一个附加数组

https://vuejs.org/v2/guide/forms.html

动态绑定v模型，无需额外的数组

1 个答案: