反应性更改后,Vue显示的文本未更新

时间:2020-07-06 06:05:13

标签: javascript vue.js

我有以下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));
  },

enter image description here enter image description here

商店:

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);

0 个答案:

没有答案