List isn't dynamically displayed in vue.js

Question

I'm new to vue.js and learning on my own with the vue doc, youtube videos and such. I've been searching for a while and looking at youtube tutorials and haven't found an answer so far, hope you guys will be able to help me.

So here's my issue, I'm building a web app and I need to display a list of objects dynamically but it doesn't show the first time I'm loading that page. I have to go to some other route and come back to see it, so I guess I'm misunderstanding some life cycle or something from that field of expertise...

I'm using the vuex to store and retrieve my data as seen below :

import Vue from 'vue';

const state = {

    journees: {},
};

const getters = {

    getJourneeList(state) {
        return state.journees;
    }
};

const mutations = {
   
    GET_LIST(state, journees) {
        state.journees = journees;
    }
};

const actions = {

    getJourneesUser({commit}) {
        Vue.axios.get('/journee/')
            .then( res => {
                commit('GET_LIST', res.data)
            })
            .catch((err) => console.log(err))
    }
};



export default {
    state,
    getters,
    mutations,
    actions
};

And then I'm getting it in my vue like this:

<template>
  <v-container>
      <v-card v-for="heure in heures" :key="heure._id">
        <v-card-title>{{ heure }}</v-card-title>
      </v-card>
  </v-container>
</template>

<script>
export default {
  name: "TimeList",
  data() {
    return {
      heures: this.$store.getters.getJourneeList,
    }
  },
  created() {
    this.$store.dispatch('getJourneesUser');
  }
}
</script>

two things you can check, first try to console.log(heures) and have a look at the type of data that you are getting in the console. Second, should the journees be a type of array instead of an object? — ASG
– ASG, Commented Oct 9, 2020 at 12:49
I've put console.log everywhere and it's getting in my created() function first as expected but then it's mounted before the mutator can be executed. Even though why doesn't it update when done is my big question... About the object/array matter I'm not sure it matters really because I'm casting in that state.journees à new object which should erase the last one, or maybe I'm getting this wrong... I'm also new to the use of promises so maybe I'm doing more than one thing the wrong way... — Double Bang
– Double Bang, Commented Oct 9, 2020 at 13:07

Elvaleryn · Accepted Answer · 2020-10-09 13:38:07Z

You need to use mapState and use it inside computed value because then computed value will response to change in state. You do not need getter but if you want here is the version with getter. It should be like this if your store module called journees:

without getter

<template>
    <v-container>
        <v-card v-for="heure in journees" :key="heure._id">
            <v-card-title>{{ heure }}</v-card-title>
        </v-card>
    </v-container>
</template>

<script>
import { mapState } from "vuex";
export default {
    name: "TimeList",
    computed: {
        ...mapState(["journees"])
    },
    created() {
        this.$store.dispatch("getJourneesUser");
    },
};
</script>

with getter

<template>
    <v-container>
        <v-card v-for="heure in getJourneeList" :key="heure._id">
            <v-card-title>{{ heure }}</v-card-title>
        </v-card>
    </v-container>
</template>

<script>
import { mapGetters } from "vuex";
export default {
    name: "TimeList",
    computed: {
        ...mapGetters(["getJourneeList"])
    },
    created() {
        this.$store.dispatch("getJourneesUser");
    },
};
</script>

Collectives™ on Stack Overflow

List isn't dynamically displayed in vue.js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related