无需额外数组即可动态绑定 v-model答案

【问题标题】：Dynamicly bind v-model without extra array无需额外数组即可动态绑定 v-model
【发布时间】：2019-09-15 17:11:43
【问题描述】：

我正在尝试使用 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.js dynamic v-model

【解决方案1】：

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

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

【讨论】：