CODEWITHSUNDEEP
vue.jsvue-component
user761100
user761100

Reputation: 2317

Passing data to Vue.js component

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?

Upvotes: 0

Views: 54

Answers (1)

CodeCreate
CodeCreate

Reputation: 26

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.

Upvotes: 1

Related Questions