vuejs의 데이터 메서드에서 소품 값에 액세스할 수 없습니다.

vuejs의 데이터 메서드에서 소품 값에 액세스할 수 없습니다.

코드(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?

어떤 도움이라도 감사합니다.

소품을 할당할 수 없었습니다.values데이터에 대해서totalCompetetions다음과 같은 방법으로 -

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

---

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

와 함께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;
    }
  }

---

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

위해서computed-

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

위해서methods-

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

암호는 작동한다.

문제는 당신의 부모 컴포넌트인 것 같아요.합격하셨습니까?values맞습니까?예를 들어 다음과 같습니다.

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

게다가, 당신 같은 경우에는 계산된 속성이 더 나은 해결책이라고 말하고 싶네요.

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

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.

언급URL : https://stackoverflow.com/questions/42801761/unable-to-access-props-values-in-data-method-in-vuejs