Vuejs: How to properly pass props to component data

Question

i'm playing with Vue 2.0, but there is something unclear.. how can i pass the props to the internal data of a component? Looking at the documentation it seems that i have done right.

HTML

<lista-servizi :servizi="modello"></lista-servizi>

the "modello" is a data already defined.

THE VUE COMPONENT

Vue.component('lista-servizi', {
 template:
 '<span class="blu">{{listaServizi.lineaGialla.descrizione}}</span>',
    props: ['servizi'],
    data: function(){
    return{
       listaServizi : this.servizi
    }

basically i try to give to data listaServizi the same value as props servizi, but in the console i have the following message:

[Vue warn]: Error in render function: "TypeError: Cannot read property 'descrizione' of undefined"

found in

---> <ListaServizi>
       <Root>

Answer 1

You should used computed instead.

Vue.component('lista-servizi', {
  //...
  computed: {
    listaServizi() {
      return this.servizi
    }
  }
}

Answer 2

Most likely you have a problem with modello . By defining the modello , your code works fine. Below is an example based on your code that works:

<div id="app-1">
<lista-servizi :servizi="modello"></lista-servizi>
</div>



Vue.component('lista-servizi', {
  template: '<span class="blu">{{listaServizi.lineaGialla.descrizione}}</span>',
  props: ['servizi'],
  data: function(){
    return{
     listaServizi : this.servizi
    }
  }
})

var app1 = new Vue({
 el: '#app-1',
 data: {
 modello: { 
  lineaGialla : {
    descrizione : " This is a description"
    }
  }
}
})

Here is a link to a working bin https://jsbin.com/qoloqoz/1/edit?html,js,output