VueJS嵌套数据模型

Question

我对VueJS比较陌生，我想知道如何在其他组件中嵌套/引用组件的属性，以便v-model绑定能够正确地更新它们。

为了说明这一点，我正在尝试这样做。

模板：

<table>
    <tr v-for="field in myFields">
        <td class="label">{{field.label}}</td>
        <td class="user-control">
            <input v-model="field.model">
        </td>
    </tr>
</table>

组件：

export default {
    data () {
        return {
            myFields: [
                {
                    "label": "label",
                    "model": this.propertyOne
                },
                {
                    "label": "label",
                    "model": this.propertyTwo
                }
            ],
            propertyOne: "",
            propertyTwo: ""
        }
    }
}

在这个示例中，我期望模板首先在输入中呈现propertyOne和propertyTwo值(例如，空字符串)，然后在我通过输入更改这些值时更新它们，就像它通常对v模型所做的那样。

第一种方法有效，这意味着如果我将propertyOne设置为"Foo"，它最初将用作输入值，但随后的更改仍然不会更新属性。我喜欢这样做，这样我就可以利用v-for钩子的功能，而不是如果我有10个以上的字段，就必须写下大量的静态模板。

Answer 1

当您这样做时："model": this.propertyTwo，这并不能确保对propertyTwo的所有后续更改都会反映在model中。要实现这一点，您可以使用的选项很少。

您可以使用watcher，因此每当propertyTwo发生更改时，您都可以执行一段代码，如下所示：

watch: {
  // whenever propertyTwo changes, this function will run
  propertyTwo: function (newProp) {
    this.myFields[1].model = newProp
  }
},

您还可以使用Computed-Properties或method，如果有任何关联的数据发生更改，它们将被执行。