Facing an issue with rendering an array from vuex using "v-for".
The "player-card" component is not being displayed, however, the "td" solution is functioning correctly.
Check out my example on JSFiddle.
HTML:
<div id="app">
<button v-on:click="moveItem">
Move Item
</button>
<table cellspacing="2" border="1" cellpadding="5">
<tr>
<td v-for="(item, item_idx) in getItems" v-bind:key="item.col">{{ (item.card)? item.card.name : 'none' }}</td>
</tr>
<tr>
<player-card v-for="(item, item_idx) in getItems" v-bind:key="item.col" v-bind:item="item"></player-card>
</tr>
</table>
<br/>
<p>{{msg}}</p>
</div>
Store:
const store = new Vuex.Store({
state: {
items: [{ col: 0, row: 0 },
{ col: 1, row: 0 },
{ col: 2, row: 0, card: { name: "hello" } } ]
},
getters: {
getterItems: state => { return state.items; }
},
mutations: {
MOVE_ITEM: state => {
state.items[0].card = state.items[2].card;
delete state.items[2].card;
state.message = JSON.stringify(state.items);
}
}
});
Component:
Vue.component('player-card', {
props: {
item: {
type: Object,
required: true
}
},
template: '<td>{{ (item.card)? item.card.name : "none" }}</td>'
});
App:
new Vue({
el: '#app',
store,
data: function() {
return {
msg: ''
}
},
computed: {
getItems() { return this.$store.getters.getterItems; }
},
mounted: function() {
this.msg = JSON.stringify(this.getItems);
},
methods: {
moveItem() {
this.$store.commit('MOVE_ITEM');
this.msg = JSON.stringify(this.getItems);
}
}
});
I have explored various solutions but have yet to find a simple one. Perhaps someone can suggest a different architectural approach.