Whenever I hit the right arrow key, it adjusts the object without re-rendering it :
<div class="map">
<div class="map-page" tabindex="0" @keyup.arrow-keys="show" ref="mapPage">
<template v-for="mapRow in mapMatrix">
<div v-for="cell in mapRow" @click="(cell.view === '1') ? showAlert() : false " v-bind:class="['map-cell',{'cell-active' : cell.active}]">
{{cell.view}}
</div>
</template>
</div>
<div>
Using key pressed(@keyup.arrow-keys="show") to alter the active cell.
show: function (event) {
if(event.keyCode === 39){
if (this.selectedCellId !== CELL_NUMBER){
this.moveRight();
}
}
},
moveRight: function(){
this.$set(this.mapMatrix[this.selectedRowId][this.selectedCellId],'active',false);
this.selectedCellId++;
this.$set(this.mapMatrix[this.selectedRowId][this.selectedCellId],'active',true);
},
It worked perfectly with the static object:
mapMatrix: {
0 : {
0 : {
"view" : "-1",
"available" : true,
"active": false
},
1 : {
"view" : "1",
"available" : true,
"active": false
},
2 : {
"view" : "1",
"available" : true,
"active": false
},
},
...
}
However, it doesn't work properly with:
fillMatrix: function(){
var i;
var g;
for(i = 0; i <= CELL_NUMBER; i++){
this.mapMatrix[i] = {};
for(g = 0; g <= CELL_NUMBER; g++){
var view = this.setVeiw(g);
this.mapMatrix[i][g] =
{
"view" : view,
"available" : true,
"active": false
};
}
}
}
It changes the object correctly, but there is no response on HTML render. What could be causing this difference?