Vue js vuex unable to display my data in my loop-CodePudding

but i can't show the comments with v-for and i don't understand why my comment data is not working. I know there is an error but I can't find it. My request returns a data , but i can't display it my loop. Thanks for your help

In store/index.js

state :{
 dataComments:[]
}
mutation: {
 getComments(state, dataComments) {
    console.log(dataComments)
    state.dataComments = dataComments;
  },
}
action: {
getArticleComments: ({ commit }, dataArticles) => {
    return new Promise(() => {
      instance.get(`/comment/${dataArticles.article_id}`)
      .then(function () {
        commit('getComments');
      })
      .catch(function (error) {
        console.log(error)
      })
    })
  },
}

in my views/home.vue

export default {
  name: "Home",
  data: function () {
    return {
      articles: [],
      comments: [],
    }
  },
methods: {
 getArticleComments(comment) {
      this.$store
        .dispatch("getArticleComments",comment)
        .then((res) => {
          this.comments = res.data;
        });
    },
}

<div >
              <button
                @click="getArticleComments(article)"
                type="button"
                >
                Show comments
              </button>
            </div>
            <!-- <div v-show="article.comments" > -->
            <div >
              <ul >
                <li
                  
                  v-for="(comment, indexComment) in comments"
                  :key="indexComment"
                >
                  {{ comment.comment_message }}
                  <!-- {{ comment.comment_message }} -->
                </li>
              </ul>
            </div>

CodePudding user response：

Your action getArticleComments does not return anything and I would avoid changing the action to return data. Instead remove the assignment to this.comments in home.vue

Actions do not return data, they get data, and call mutations that update your store.

Your store should have a getter that exposes the state, in this case the dataComments.

getters: {
    dataComments (state) {
  return state.dataComments;
  }
}

Then in your home.vue you can use the helper mapGetters

computed: {
  ...mapGetters([
    'dataComments'
  ])
}

You want your views to reference your getters in your store, then when any action updates them, they can be reactive.

More here: https://vuex.vuejs.org/guide/getters.html

CodePudding user response：

As far as I see, you don't return any data in your getArticleComments action. To receive the comments you should return them, or even better, get them from your store data directly.

First make sure that you pass the response data to your mutation method:

getArticleComments: ({ commit }, dataArticles) => {
    return new Promise(() => {
      instance.get(`/comment/${dataArticles.article_id}`)
      .then(function (res) {
        commit('getComments', res.data);
      })
      .catch(function (error) {
        console.log(error)
      })
    })
  },

After dispatching you could either return the response data directly or you could access your store state directly. Best practice would be working with getters, which you should check in the vue docs.

getArticleComments(comment) {
      this.$store
        .dispatch("getArticleComments",comment)
        .then((res) => {
          // in your case there is no res, because you do not return anything
          this.comments = 
          this.$store.state.dataComments;
        });
    },