javascript - 无法在vuejs中的数据方法中访问 Prop 值

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

我无法通过以下方式将 Prop 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 -

对于计算 -

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

对于方法 -

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