I am new to vuejs I want re-build my v-for loop after update vuex object. see following example code.
<div class="row search-result-row" v-for="report in reports" :key="report">
<p>{{ report.description }}</p>
</div>
here is my vuex object called globalReports. when I equal globalReports to reports it doesn't work.
computed: {
updateReports: function() {
return this.reports = this.$store.state.globalReports;
}
},
How can I do this without page reload?
Try with {{updateReports}}. Computed will not be executed util it is monitored or called, just called {{updateReports}}
<div class="row search-result-row" v-for="report in reports" :key="report">
<p>{{ report.description }}</p>
</div>
{{updateReports}}
And don't return anything just update/Assign value of this.reports
computed: {
updateReports: function() {
this.reports = this.$store.state.globalReports;
}
},
updateReports can just return the state globalReports and used in as v-for="report in updateReports"by using mapState, you can map the value of globalReports to reports automatically.
Everytime globalReports change, reports gets updated automatically, and the rebuild will happen automatically when it gets updated.
<script>
import { mapState } from "vuex";
export default {
computed: mapState({
reports: "globalReports"
})
};
</script>
Vuex is reactive so when you update the state,this change will affect all components where you use the state properties.To be more specific:
I will show you an example:
//VUEX STORE
state: {
property1
},
getters: {
getProperty1(state) {
return state.property1
}
},
mutations: {
setProperty1(state, payload) {
state.property1 = payload
}
},
actions: {
changeProperty1({commit}, payload) {
commit('setProperty1', payload)
}
}
And below is the component in which you interact with state
<template>
<p>this is from state of store {{ getProperty1 }</p>
<input type="text" v-model="value">
<button @click="changeState">Sumbit</button>
</template>
<script>
export default {
data() {
return {
value: ''
}
},
computed: {
getProperty1() {
return this.$store.getters.getProperty1
}
},
methods: {
changeState() {
this.$store.dispatch('changeProperty1', this.value)
}
}
}
</script>
Getters are to get the state properties Mutations to change the state properties Actions to perform async code and then to call mutations to change the state
For more please visit vuex docs
updateReportsis a computed property. Shouldn't it be inmethods? It might be the case thatupdateReportsis never referenced in the DOM, thereby never "computed" per se and does not execute. VueJS is reactive such that wheneverthis.reportsis updated, your DOM will be updated.