Question

由于某些原因，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/

我在这里缺少什么或执行不正确的是什么？

Answer 1

您应该使用v-bind:或仅使用:绑定它

   <div id="app">
      <mycomponent :customer_data="customer" />
    </div>

https://vuejs.org/v2/guide/components-props.html

Answer 2

您要传递的字符串是“ customer”，而不是实际的客户对象。您需要做的就是将customer_data="customer"更改为v-bind:customer_data="customer"

无法从组件属性设置VueJs组件数据值

2 个答案: