Vue.js 2.0 Dynamic Props Docs

Question

js 2.0 and I'm stock in dynamic props.

See Image attached

My HTML code like this:

<div id="app">
    <div>
      <input v-model="parentMsg">
      <br>
      <child v-bind:my-message="parentMsg"></child>
    </div>
</div>

My Component code:

    Vue.component('child', {

  props: ['myMessage'],
  template: '<p>{{ myMessage }}</p>',

})

var app = new Vue({

    el: "#app",


});

I know that data should be a function but how I'm going to implement it. I get this error on the console.

Property or method "parentMsg" is not defined on the instance but referenced during render

Answer 1

I think message is clear. "parentMsg" is not defined on the instance. You have to define parentMsg at parent level. like following:

var app = new Vue({
    data: { 
       "parentMsg": ""
    } 
    el: "#app"
});

You can have a working fiddle here.