Unable to set VueJs Component data values from component prop

Question

For some reason, the value for customer_data.customerReference is never available yet I can see using Chrome debugging tools that the data exists in the prop and is successfully passed from my app down to the component.

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
            }
        };
    }
});

Here is my markup including the template:

<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>

Please see the following JsFiddle with a simplified example: https://jsfiddle.net/ProNotion/a8c6nqsg/20/

What is that I am missing here or implementing incorrectly?

v-bind:customer_data="customer", without v-bind, you're just passing down the string 'customer' — Chris Li
– Chris Li, Commented Aug 26, 2019 at 15:56

tony19 · Accepted Answer · 2022-07-15 00:28:39Z

2

You should bind it using v-bind: or just :

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

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

edited Jul 15, 2022 at 0:28

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Aug 26, 2019 at 16:01

Tony Tom

1,5831 gold badge12 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ProNotion Over a year ago

In this case, you are correct, a typo in my example however in my app for some reason the issue persists. I will need to try and replicate the issue in my JsFiddle

Jbluehdorn · Accepted Answer · 2019-08-26 15:57:50Z

0

You're passing in a string that says 'customer' and not the actual customer object. All you need to do is change customer_data="customer" to v-bind:customer_data="customer"

answered Aug 26, 2019 at 15:57

Jbluehdorn

4752 silver badges11 bronze badges

Collectives™ on Stack Overflow

Unable to set VueJs Component data values from component prop

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related