Question

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

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

然后，我定义如下方法-

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

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

age

此模板呈现良好。但是，模型不受限制，因为如果用户在输入字段中输入，<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绑定？

Answer 1

使用道具：

在子组件中定义：

props: ['name', 'age']

并删除data元素。

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

1 个答案: