Issue with displaying Vue data from vuex in the user interface

Question

Issue with displaying Vue data from vuex in the user interface

I'm facing a challenge in displaying plan data on my Vue application. The data is fetched from an API running locally. Although I have successfully added the data to the store/vuex and verified its correctness using vue dev tools, I am unable to visualize it on the user interface. I need assistance in troubleshooting why the data isn't appearing on the UI.

Within my plans.vue file, I simply utilize a for loop over the plans data, which works when I manually input the data into the array. Therefore, there seems to be an issue between the store and the data prop causing the problem.

store.js

state: {
 plans: []
}
mutations: {
  loadPlans(state, plans) {
     state.plans = plans
 }
},
getters: {
    loadPlans(state) {
      return state.plans
    },
}

plans.vue

created() {
        PageOptions.pageEmpty = true;
        this.$store.dispatch('loadPlans')
    },
    data() {
        return {
            plans: this.$store.getters.loadPlans,
        }
    },

This code snippet has been simplified to focus solely on the issue at hand; there is additional unrelated code present as well.

javascript vue.js vuex

Answer 1

Answer №1

Consider using a similar approach:

datastore.js

state: {
  data: []
},
getters: {
  retrieveData(state) {
    return state.data
  },
},
mutations: {
  setData(state, newData) {
    state.data = newData
  }
},
actions: {
  async fetchData({commit}) {
    await this.$axios.get('http://localhost/api/data', function(response) {
      commit('setData', response.data)
    })
  }
}

info.vue

async beforeCreate() {
  await this.$store.dispatch('fetchData')
},
computed: {
  myInfo() {
    return this.$store.getters.retrieveData
  }
}

Answer 2

Consider using a similar approach:

datastore.js

state: {
  data: []
},
getters: {
  retrieveData(state) {
    return state.data
  },
},
mutations: {
  setData(state, newData) {
    state.data = newData
  }
},
actions: {
  async fetchData({commit}) {
    await this.$axios.get('http://localhost/api/data', function(response) {
      commit('setData', response.data)
    })
  }
}

info.vue

async beforeCreate() {
  await this.$store.dispatch('fetchData')
},
computed: {
  myInfo() {
    return this.$store.getters.retrieveData
  }
}

Answer 3

Answer №2

If you want to retrieve the value using a computed method, consider that the data object is evaluated prior to setting the state value. Adjust your code accordingly by making the following changes:

data:{
    return {};
}
,computed: {
    plans: this.$store.getters.loadPlans
}

Answer 4

If you want to retrieve the value using a computed method, consider that the data object is evaluated prior to setting the state value. Adjust your code accordingly by making the following changes:

data:{
    return {};
}
,computed: {
    plans: this.$store.getters.loadPlans
}

Issue with displaying Vue data from vuex in the user interface

Answer №1

Answer №2

Similar questions

Generating a tree structure using a JavaScript array

Alternative method to jQuery's "find" selector

Issue with the navbar toggler not displaying the list items

Retrieves MySQL SQL findings and converts them into a JSON structure

Sorting two different divisions is an example

Error: It is not possible to add the "providers" property as the object is not extendable within N

Preserve the JavaScript Promise for later utilization

A JQuery function linked to the click event of the body element triggers another click event right away

A guide on implementing listings in React Native through the use of loops

What causes Node's crypto module to generate varying outputs for identical strings?

Alter the font color upon clicking the menu using jQuery

Running the command "npm run dev" generates a series of files named 0.js, 1.js, all the way up to 14.js within the

Can we store multiple Foreign Keys in Laravel in order to display numerous items from different tables in a Package Items table within Quasar 1 Laravel 2 framework?

The Image component in a test within Next.js was not wrapped in an act(...) during an update

Issue with Angular $compile directive failing to update DOM element

How can scriptlets be used to dynamically create a properly functioning model?

Javascript's ReferenceError occasionally acts inconsistently when using Firefox's scratchpad

NPM rimraf - proceed with the execution even if directories are not found (do not halt with exit code 1)

Assistance with Redirecting Responses in Next.js API Routes

Refreshing the page to dynamically alter background and text hues