由于某种原因,customer_data.customerReference
的值永远不可用,但我可以使用 Chrome 调试工具看到数据存在于 prop 中,并且已成功从我的应用传递到组件。
Vue.component("mycomponent", {
template: '#my-component-template',
props: ["customer_data"],
data() {
return {
myData: 'This works fine!',
form_data: {
customerRef: this.customer_data.customerReference
}
}
}
});
new Vue({
el: "#app",
data() {
return {
customer: {
customerReference: 007
}
};
}
});
这是我的标记,包括模板:
<div id="app">
<mycomponent customer_data="customer" />
</div>
<script type="x-template" id="my-component-template">
<div>
<p>{{form_data.customerRef}}</p>
<p>{{myData}}</p>
</div>
</script>
请参阅以下带有简化示例的 JsFiddle: https://jsfiddle.net/ProNotion/a8c6nqsg/20/
我在这里遗漏了什么或实现不正确?
最佳答案
您应该使用 v-bind:
或仅 :
绑定(bind)它
<div id="app">
<mycomponent :customer_data="customer" />
</div>
关于javascript - 无法从组件属性设置 VueJs 组件数据值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57661182/