Vue 对象更改，但不会重新渲染

Question

When I press right arrow key, it changes the object, but not re-render 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>

By key pressed(@keyup.arrow-keys="show") want to change 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 nice 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
            },

          },
...
}

But doesn't work 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 properly, but no reaction on html render. What is the difference?

Answer 1

The way you're building the matrix object won't work correctly with Vue; it likely won't end up being reactive (see Change Detection Caveats ).

Either use this.$set when building the matrix, or build it first in a local variable then assign it to this.mapMatrix last to ensure that the whole object will be reactive.

Something like this:

fillMatrix() {
  // This is a fresh new unobserved object
  const mapMatrix = {};

  for (let i = 0; i <= CELL_NUMBER; i++) {
    mapMatrix[i] = {};

    for(let g = 0; g <= CELL_NUMBER; g++) {
      mapMatrix[i][g] = {
        view: this.setView(g),
        available: true,
        active: false,
      };
    }
  }
  
  // Since the this.mapMatrix property is reactive, Vue will detect this
  // assignment and make the new mapMatrix object reactive
  this.mapMatrix = mapMatrix;
}

Answer 2

Should change object-fill function to more reactive way (as in the @jcbdrn comment):

fillMatrix: function(){
      var i;
      var g;
      for(i = 0; i <= CELL_NUMBER; i++){
          this.$set(this.mapMatrix,i,{});
          for(g = 0; g <= CELL_NUMBER; g++){
            var view = this.setVeiw(g);
             this.$set(this.mapMatrix[i],g,
               {
                   "view" : view,
                   "available" : true,
                   "active": false
             }
           );

        }
      }
    },

That solved the problem.