Vueの小道具がヌルになる？

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がnullになり小道具を（私はVUEのデベロッパーツールでそれを見ることができます）。これをどうすれば解決できますか？

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を作成しましたので、私は」：

あなたはそのようにのようなあなたのメソッドを呼び出すことができますそれだけを嘲笑したNDは、任意のスコープの問題が発生していないことを示すためにpromiseを返しました：あなたが直接 `prop`を変異させるべきではありません

https://jsfiddle.net/wu6ad78m/