Vue道具变为空？

我有这个成分在我vue.js应用：Vue道具变为空？

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 ）。我怎样才能解决这个问题？

来源

2017-01-30 Jamie

不应该直接变异一个'prop'，而不是你应该创建一个本地副本和祭坛来代替。此外，你似乎没有通过'索引'。 –

@craig_h感谢您的回复。你能举个例子吗？（我已经添加了索引谢谢） – Jamie

我不能告诉你究竟在做什么，但你需要让你的本地prop，可在created钩内部完成的副本，那么你可以使用，而不是局部变量：

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>

我创建了一个的jsfiddle向您展示如何工作的，很明显，我不知道该怎么做ForumService.increment(forum)（或什么forum是），所以我我只是嘲笑那个第二返回promise表明您没有遇到任何问题，范围：

https://jsfiddle.net/wu6ad78m/

来源

2017-01-30 12:27:53

Vue道具变为空？

回答

相关问题