I am currently constructing a vue2 component, utilizing a vuex store object. The structure of the component is as follows:
<template>
<ul id="display">
<li v-for="item in sourceData()">
{{item.id}}
</li>
</ul>
</template>
<script>
export default {
mounted: function () {
console.log('mounted')
},
computed: {
sourceData: function() {
return this.$store.getters.visibleSource
}
}
}
</script>
The store gets populated through an ajax call at the beginning of the process, within the main javascript entry:
new Vue({
store,
el: '#app',
mounted: function() {
this.$http.get('/map/' + this.source_key + '/' + this.destination_key)
.then(function (response) {
store.commit('populate', response.data)
})
.catch(function (error) {
console.dir(error);
});
}
});
Although there are no evident errors and the Vue devtools explorer shows that my component's sourceData attribute contains numerous items, nothing seems to be rendered on the page. Even with good data in the component, the template does not display anything.
Is it necessary to implement some sort of callback to trigger the component after the vuex store has been populated?
EDIT: Here is the code for the store:
import Vue from 'vue';
import Vuex from 'vuex';
import { getSource, getDestination } from './getters'
Vue.use(Vuex)
export const store = new Vuex.Store({
state: {
field_source: [],
field_destination: []
},
getters: {
visibleSource: state => {
// Formats the data
return getSource(state.field_source)
},
visibleDestination: state => {
return getDestination(state.field_destination)
}
},
mutations: {
populate(state, data) {
state.field_source = data.source
state.field_destination = data.destination
}
}
})
EDIT2: It might not be due to the v-for loop - I do not see any elements being rendered from the template, not even the main ul tag, which should at least appear empty if there were any issues further down the script.