vuex not reactive when

Question

I am using vuex and I would like to reference a getter in an array.

Ex.

vuex store

export default new Vuex.Store({
   state: () => ({
      projectData: {
           projectHours: null,
      },
   }),

   getters: {
        projectHours: state => {
         return state.projectData.projectHours
       },
   },

})

code.vue

data: function() {

    return {

      projectInfoLayout: [{
            "data_1": this.projectHours
      }],
    }
}
computed: {
    ...mapGetters([ 'projectHours' ])
},

...

HTML Code

     <div v-for="item in projectInfoLayout">

       {{item.data_1}} // NOT REACTIVE

       {{projectHours}} // REACTIVE

     </div>

When I use the getter (projectHours with mapGetters) it works

When I use the reference data_1 it is not reactive.

Please, have you any idea?

Thanks in advance

KR

Giovanni

Answer 1

You should use a computed property instead of static array - static data is initialized when the component is created and is not automatically modified by Vue later:

computed: {
    ...mapGetters([ 'projectHours' ]),
    projectInfoLayout()
    {
      return [
        data_1: this.projectHours,
      ];
    }
},