I'm relatively new to Vue and Vuex, so please bear with me as I navigate through.
My goal is to trigger the computed function versions() whenever there's a change in state.template, specifically when state.template.versions changes.
This section of the component should be re-rendered upon a change in state.template.versions. Here you can find the computed property versions() that should be invoked:
<el-dropdown-menu class="el-dropdown-menu--wide"
slot="dropdown">
<div v-for="version in versions"
:key="version.id">
...
</div>
</el-dropdown-menu>
...
computed: {
...mapState('documents', ['template', 'activeVersion']),
...mapGetters('documents', ['documentVersions', 'documentVersionById', 'documentFirstVersion']),
versions () {
return this.documentVersions.map(function (version) {
const v = {
id: version.id,
name: 'Draft Version',
effectiveDate: '',
status: 'Draft version',
}
return v
})
},
Here is the getter:
documentVersions (state) {
return state.template ? state.template.versions : []
},
And here is the action:
createProductionVersion (context, data) {
return new Promise((resolve, reject) => {
documentsService.createProductionVersion(data).then(result => {
context.state.template.versions.push(data) // <-- I'm updating state.template here. Expecting versions() to run
context.commit('template', context.state.template)
resolve(result)
})
Lastly, this is the mutation:
template (state, template) {
state.template = template
},
I've come across instances where Vue doesn't detect array changes, yet it seems like .push() operation is being recognized. Source: https://v2.vuejs.org/v2/guide/list.html#Caveats
Any thoughts on why the computed property isn't triggered upon updating context.state.template.versions?