Unable to access props values in data method in vuejs

Question

I have the code (vuejs2) -

Vue.component('competetion-list', {
  template: `<div>{{totalCompetetions}}</div>`,
  props: ['values'],
  data: function () {
    return { totalCompetetions: this.values.length}
  }
})

Nothing is printed on the page but if I change the template value to

template: `<div>{{this.values.length}}</div>`

it prints 15 . What am I doing wrong and how can I pass the props to the data ?

Any help is much appreciated.

Answer 1

I was unable to assign the prop values to data totalCompetetions in the following way -

data: function () {
    return { totalCompetetions: this.values.length}
  } 

---

But I was able to do it using the watch , computed , and methods properties.

With watch property -

  watch: { values: function(){ this.totalCompetitions = this.values; } } 

With computed property -

  computed:{ competition:{ get: function(){ return this.values.length; } } 

With methods property -

  methods:{ competitionn: function(){ return this.values.length; } } 

---

But for computed and methods properties, I needed to set totalCompetetions in the following way -

For computed -

 template: `<div><p>{{totalCompetitions = competition}}</p></div>` //without parenthesis 

For methods -

template: `<div><p>{{totalCompetitions = competition}}</p></div>` //without parenthesis

Answer 2

You code does work .

I guess the problem is your parent component. Did you pass the values correctly? for example:

<competetion-list :values="[1, 2, 3]"></competetion-list>

Besides, for your case I'd say computed properties is a better solution.

computed: {
  totalCompetetions () {
    return this.values.length
  }
}

Answer 3

From the data() method, you should be able to reference the component's properties using this .

Try following:

Vue.component('competetion-list', {
  template: `<div>{{totalCompetetions}}</div>`,
  props: ['values'],
  data: function () {
    var data = { totalCompetetions: this.values.length}
    return data
  }
})

As validly mentioned in the comment, if values array is changing later, you may have to put a watcher on the prop and inside watcher, set totalCompetetions as this.values.length .