Vue 소품이 null이됩니까?

Question

나는 나의 vue.js 응용 프로그램이 구성 요소를 가지고있다 :

export default { 
    props: ['forums'], 

    methods: { 
     increment(forum, index) { 
      ForumService.increment(forum) 
       .then(() => { 
        this.forums.splice(index -1, 2, this.forums[index], this.forums[index -1]); 
       }); 
     }, 
    } 
} 

하지만이 증가 할 때 :

<i class="material-icons" @click="increment(forum)">&#xE316;</i> 

forums은 영이된다 소품 (내 VUE의 DevTools로에있는 것을 볼 수 있습니다). 이 문제를 어떻게 해결할 수 있습니까?

Answer 1

난 당신이 무엇을하고 있는지 정확히 알 수는 없지만, 당신은 당신이 후 사용할 수 있으며, created 후크 내에서 수행 할 수 있습니다 로컬 prop의 복사본을 만드는 대신 로컬 변수가 필요합니다 :

export default { 
props: ['forums'], 
    created() { 
    this.localForums = this.forums; // Copy prop to local variable 
    }, 
    methods: { 
    increment(forum, index) { 
     ForumService.increment(forum) 
     .then(() => { 
      this.localForums.splice(index - 1, 2, this.localForums[index], this.localForums[index - 1]); 
     }); 
    }, 
    }, 
    data() { 
    return { 
     localForums: [] 
    } 
    } 
} 

을

<i class="material-icons" @click="increment(forum, 1)">&#xE316;</i> 

나는 ForumService.increment(forum)가 무엇을 아무 생각이 없다 (또는 무엇 forum는) 분명히, 그 작동 방법을 보여주기 위해 JSFiddle을 만들었습니다, 그래서 나는 ':

당신은 다음과 같이 당신의 메소드를 호출 할 수 그냥 조롱했다. 차 당신이 어떤 범위의 문제가 발생하지 않는 것을 보여주기 위해 promise을 반환 : 당신은 직접`prop`를 변이 안

https://jsfiddle.net/wu6ad78m/