Vue.js将v模型输入与prop初始值绑定

Question

我试图将初始值传递给v-model绑定的选择输入。我无法弄清楚为什么这不起作用：

props: ['team'],
data() {
    form: {
        data: {
            country: this.team.country
        }
    }
}

form.data.country是undefined。虽然，道具数据实际上是传下来的。我可以使用 Vue Devtools （例如$vm0.team.country）访问它，我可以从道具中打印其他数据。但是，它未在data()中注册。

此外，尝试使用mounted()进行调试时，未定义属性team。

mounted() {
    console.log(this.team); 
}

但是，正如我之前所说，它是在渲染模板时定义的，可以像这样使用。

<input class="input" type="text" name="name" :value="team.name" disabled>

为什么我传递的属性在data()？

中无法识别

Answer 1

道具数据由父母加载。这在@Bert

的评论中提出

Answer 2

异步加载不是问题。即使团队在上面硬编码，it's still undefined在组件中创建数据时也是如此。 （组件需要在传递prop的根Vue之前创建。）

或许有人会纠正我，从来没有充分理由在您的数据中引用道具。 某些东西要么数据（当前组件知道在哪里找到什么它想要 或它是一个道具（该组件将让它的上下文提供信息）。

然后，正如您所发现的，您的数据只创建一次。 Vue会监视所有变化，但您很容易受到根值的影响。如果在创建数据时引用的值为更改，则会更改反应管道。答案是store pattern。您在全局范围内观察变量，即使它的内容可能会发生变化，也永远不会被替换。

code