无法在Vue.js的数据方法中访问道具值

Question

我有代码（vuejs2）-

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

页面上没有打印任何内容，但是如果我将template值更改为

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

它打印15。我在做错什么，如何将其传递props给data？

任何帮助深表感谢。

Answer 1

我无法通过以下方式将道具分配values给数据totalCompetetions-

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

但我可以用做它watch，computed和methods性能。

随着watch物业-

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

随着computed物业-

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

随着methods物业-

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

但是对于computed和methods属性，我需要以totalCompetetions以下方式进行设置-

对于computed-

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

对于methods-

template: `<div><p>{{totalCompetitions = competition()}}</p></div>` //with parenthesis