Javascript Vue道具变为空？

我的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>

和#xE316；

---

论坛的道具

变为空（我可以在我的vue开发工具中看到）。如何修复此问题？
我不能确切地告诉您正在做什么，但您需要在本地复制您的
道具
，这可以在创建的
钩子内完成，然后您可以使用本地变量：

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>

和#xE316；

我创建了一个JSFIDLE来向您展示它是如何工作的，显然我不知道
ForumService.increment（forum）
做了什么（或者
forum
是什么），所以我只是模拟了一下，并返回了一个
承诺来表明您没有遇到任何范围问题：

您不应该直接对
道具进行变异，而应该创建一个本地副本，并将其替换。另外，您似乎没有通过
索引
@craig\h感谢您的回复。你能举个例子吗？（我已经添加了索引，谢谢）