CODEWITHSUNDEEP
vue.js
Bluephlame
Bluephlame

Reputation: 3969

Passing a value into a component

I am implementing a component in vue.js and I need to pass in a value to the component from the parent view. Below is what I am attempting to do. The div correctly receives the id however, the Component does not receive the same id value. In the final HTML, the id renders as you see it "i-{{item.Id}}-newsletter" and is not parsed by vue.js

What is the correct syntax to send data to the vue.js component?

<div class="slds-col" id="{{item.Id}}
     <marketing-preference id="i-{{item.Id}}-newsletter" name="Newsletter" ></marketing-preference>
</div>

Here is the Javascript that defines the component. 

Vue.component('marketing-preference',{
  template: '#marketing-preference-template',
  props:['id','name']
});

Upvotes: 0

Views: 261

Answers (1)

Roy J
Roy J

Reputation: 43899

You need dynamic props notation: :id="'i-' + item.Id + '-newsletter'"

Upvotes: 2

Related Questions