在 v-for 循环中使用 v-model答案

【问题标题】：Use v-model in a v-for loop在 v-for 循环中使用 v-model
【发布时间】：2021-02-09 20:06:11
【问题描述】：

我有一个包含以下数据的组件 -

data() {
    return {
        name: '',
        age: '',
    }
}

然后我定义一个类似下面的方法 -

formData() {
   const data = [
      {label: 'Name', model: this.name},
      {label: 'Age', model: this.age},
   ]
   return data
}

在我的模板中，我正在编写一个 v-for 循环访问 formData() 以呈现 HTML。（我这样做是因为会有大约 50 个表单字段，例如 name 和 age，并且每个表单字段的 HTML 都是相同的）。

<md-table>
    <md-table-row v-for="d in formData()" :key="d.label">
        <md-table-cell>{{d.label}}</md-table-cell>
        <md-table-cell>
            <md-field>
                 <md-input v-model="d.model"></md-input>
            </md-field>
        </md-table-cell>
    </md-table-row>
</md-table>

这个模板渲染得很好。但是，模型没有绑定，因为name 和age 的值在用户输入字段时不会在数据中改变。

我很确定这是因为在声明formData() 时，我实际上是在传递model 中的数据值。有没有办法我可以真正传递模型，以便模板v-models绑定？

【问题讨论】：

如果您将name 和age 的值分配给新对象，您将失去反应性。 Vue 只会为你在数据中预先声明的任何内容添加响应性。为什么like this 不适用于您的情况？请提供minimal reproducible example，清楚地解释您想要实现的目标。例如，最终目标，而不是您面临的技术难题。
Another variant 以上。但是，它会循环遍历您项目的所有属性，因此如果您的项目具有可选道具，您实际上必须指定要在表中列出的道具（否则您最终会得到具有不同数量 @987654338 的行@s，取决于项目的内容）。
这里的相关问题是：“你为什么有formData()？ 在你目前所展示的内容中，它的唯一目的是为每个元素提供空的默认值如果您直接遍历项目属性，则会破坏您获得的反应性。

标签： vue.js vue-material

【解决方案1】：

使用道具：

在子组件中定义：

props: ['name', 'age']

并删除data 元素。

【讨论】：