CODEWITHSUNDEEP
javascriptvue.jsvuejs2vue-component
steve
steve

Reputation: 473

passing value from parent to child not working

Using Vuu.js, I'm trying to pass a value from parent to child component. I have this working fine with a provided example. But when I change the name, it stops working. I can't figure out what i'm doing wrong. My understanding on props is limited, i'm still trying to get me head around it.

Working Example:

https://codepen.io/sdras/pen/788a6a21e95589098af070c321214b78

HTML

<div id="app">
  <child :text="message"></child>
</div>

JS

Vue.component('child', {
  props: ['text'],
  template: `<div>{{ text }}</div>`
});

new Vue({
  el: "#app",
  data() {
    return {
      message: 'hello mr. magoo'
    }
  }
});

Non Working Example:

HTML

<div id="app">
  <child :myVarName="message"></child>
</div>

JS

Vue.component('child', {
  props: ['myVarName'],
  template: `<div>{{ myVarName }}</div>`
});

new Vue({
  el: "#app",
  data() {
    return {
      message: 'hello mr. magoo'
    }
  }
});

Upvotes: 0

Views: 85

Answers (2)

JackOfAshes - Mohit Gawande
JackOfAshes - Mohit Gawande

Reputation: 558

In your parent template

<div id="app">
  <child :myVarName="message"></child>
</div>

replace

<child :myVarName="message"></child>

with

<child :my-var-name="message"></child>

Additionally you can refer this to get insights of casing.

Upvotes: 6

Mark Z.
Mark Z.

Reputation: 2447

Leave everything as is in your updated example EXCEPT in the HTML change "myVarName" to "my-var-name" - this is done by default by Vue and within the js you can use the camelCased version myVarName still.

Upvotes: 3

Related Questions