vue.js - 无需额外数组即可动态绑定 v-model

Question

我正在尝试使用 v-for 和模板创建多个 vuetify-textfields，因此我可以轻松地添加和编辑文本字段，同时保持我的代码干净。

模板标签：

<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-model 通过创建一个额外的数组来工作，你可以在其中保护你的数据（在我的示例中为姓名和姓氏）。

但这感觉像是一个笨拙的解决方法。那么有什么办法可以直接将 v-model 绑定到 this.name/this.lastname 上呢？

标签： vue.jsdynamicv-model

Answer 1

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

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