Passing data to Vue.js component

Question

I am creating a component and want to pass two properties (item & brokerageID) to the component. Here is the HTML code:

{{brokerageID}}
<holiday-component  v-bind:item="item" v-bind:brokerageID="brokerageID" testID="45"  ></holiday-component>

Here is the code for 'holiday-component'

Vue.component('holiday-component', {
props: ['item',
      'brokerageID',
      'testID',
    ],


data () {
  return {
   holidaysData: [],
    showHolidays: false,
 }
},      

methods: {
    getHolidays(contactID) {

   ....
 },

template: <div> {{testID}} {{item.contactName}} {{brokerageID}}
....

The 'item' property is getting passed to the component (item.contactName is displayed correctly in the component template. However, somehow, brokerageID (property of the Vue object) is not getting passed. This property exists which is confirmed as {{brokerageID}} used above the component in HTML displays value. But, within the component template, brokerageID is not available. Also, the testID property passed to the component is not displayed.

Could someone please advise, what is wrong in my implementation that I am unable to use brokerageID in my component?

tony19 · Accepted Answer · 2022-07-15 01:31:15Z

1

See Vue's docs about prop naming https://v2.vuejs.org/v2/guide/components.html#camelCase-vs-kebab-case

In this instance, using v-bind:brokerage-id and v-bind:test-id should do the trick.

edited Jul 15, 2022 at 1:31

tony19

140k24 gold badges281 silver badges354 bronze badges

answered Dec 14, 2017 at 15:51

CodeCreate

263 bronze badges

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

Collectives™ on Stack Overflow

Passing data to Vue.js component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related