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

Answer 2

您的代码可以正常使用。

我猜问题是你的父组件。你是否正确通过了values？例如：

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

此外，对于您的情况，我会说计算属性是一个更好的解决方案。

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

Answer 3

从data（）方法，您应该能够使用this引用组件的属性。

请尝试以下操作：

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

正如评论中有效提到的，如果values数组稍后发生变化，您可能需要将观察者放在道具和内部观察者身上，将totalCompetetions设置为this.values.length。

无法在vuejs中的数据方法中访问道具值

3 个答案: