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设置为＆＃34; Foo＆＃34;，它最初会被用作输入值，但后续更改仍然不会更新属性。我很乐意这样做，这样我就可以利用v-for hook的强大功能，而不必记下大量的静态模板，如果我有10个以上的字段。

Answer 1

执行：null时，这不能确保"model": this.propertyTwo的所有后续更改都会反映在propertyTwo中。要实现这一目标，您可以选择的选项很少。

您可以使用watcher，因此只要model发生更改，您就可以执行一段代码，如下所示：

propertyTwo

您还可以使用Computed-Properties或method，如果相关数据发生变化，它们将被激活，它们将被执行。

VueJS嵌套数据模型

1 个答案: