Passing props to component data in Vuejs: Best practices

Question

Passing props to component data in Vuejs: Best practices

I'm experimenting with Vue 2.0 and I've encountered a bit of confusion. How can I properly pass props to a component's internal data? I've followed the documentation, but it still seems unclear.

HTML

<service-list :services="model"></service-list>

The "model" data has already been defined.

THE VUE COMPONENT


Vue.component('service-list', {
    template: '<span class="blue">{{serviceList.yellowLine.description}}</span>',
    props: ['services'],
    data: function(){
        return{
            serviceList: this.services
        }
    }

In essence, I am attempting to set the value of the data property serviceList equal to the prop services. However, I am receiving the following error message in the console:

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

found in

---> <ServiceList>
       <Root>

javascript vue.js

Answer 1

Answer №1

Consider utilizing computed instead.

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

Answer 2

Consider utilizing computed instead.

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

Answer 3

Answer №2

It seems like the issue lies with the modello variable. Once you define the modello, your code should run smoothly. Below is a sample code snippet based on your original code:

<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"
    }
  }
}
})

If you'd like to check out a working example, click on this link: https://jsbin.com/qoloqoz/1/edit?html,js,output

Answer 4

It seems like the issue lies with the modello variable. Once you define the modello, your code should run smoothly. Below is a sample code snippet based on your original code:

<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"
    }
  }
}
})

If you'd like to check out a working example, click on this link: https://jsbin.com/qoloqoz/1/edit?html,js,output

Passing props to component data in Vuejs: Best practices

Answer №1

Answer №2

Similar questions

Automatically calculate line total using jQuery when input blurs

The error message "TextEncoder is not defined with mongodb nodes" is indicating that there is

Is there a way to retrieve cookie data from a component that has been rendered in _app.js using Next.js?

What are the steps to integrate openjphjs with next.js?

extract all elements from an array nested within another array

Tips for ensuring a watcher only runs once in each digest cycle, regardless of how many times the property is modified

Exploring ways to access an element's background color through JavaScript

What is the method for toggling background URLs?

Unable to find any matches when conducting a search through Google Apps Script

`Issues encountered while converting PHP Array to JSON format`

What is the best way to save static information (such as country codes) within a Vue.js application?

Steps to stop POST requests sent via AJAX (acquired through Firebug)

Automatically hide a label after a certain amount of time following a button click

Fetching the "User ID" variable from localStorage to PHP with angularjs - a quick guide

How can I align Javascript output vertically in the middle?

What is the process of triggering an action from within getInitialProps?

What is the best way to send a Node.js variable to the inner part of a Pug script tag?

jQuery is unable to locate the FireBreath object

Stop angular schema form's destroyStrategy from deleting any data

Angular: Exploring the possibilities of condition-based click event implementation