我有以下Vue模板:
<b-button :disabled="!canVote" v-on:click="upvote" class="mr-1" variant="outline-secondary" size="sm">
{{ comment.up }}
{{ upvotes }}
{{ downvotes }}
</b-button>
留在胡须中的属性即使已被修改也不会更新,我可以在控制台中看到Vue拥有更新后的值。
我尝试过的事情:
props: {
comment: Object,
},
computed: {
upvotes() {
return this.$store.getters.GET_COMMENT(this.comment._id).up;
},
downvotes() {
return this.comment.down;
},
methods: {
async upvote() {
await this.$store.dispatch('COMMENT_VOTE', {
vote: 1,
itemId: this.itemId,
commentId: this.comment._id,
});
console.log(this.comment);
console.log(this.$store.getters.GET_COMMENT(this.comment._id));
},
商店:
mutations: {
SET_VOTE: (state, payload) => {
const { commentId, vote, userId, nickname } = payload;
const comment = state.comments[commentId];
if (!comment.votes) {
comment.votes = [];
}
comment.votes.push({ vote, user: { nickname, id: userId } });
if (vote === 1) {
comment.up += 1;
} else {
comment.down += 1;
}
},
actions: {
COMMENT_VOTE: async (context, payload) => {
const body = { itemId: payload.itemId, vote: payload.vote };
await post('API', `/comments/${payload.commentId}/votes`, body, context);
const mutation = {
commentId: payload.commentId,
vote: payload.vote,
userId: context.rootState.userId,
nickname: context.rootState.userNickname,
};
context.commit('SET_VOTE', mutation);
},
PS这也没有帮助:
Vue.set(comment, 'up', comment.up + 1);