Vue.js 组件不会对数据更新做出反应

Question

Try to render a data into <table></table> and add a event handler to update the data. My initial data is array of arrays. And handler just update these arrays. Table rendered, handler forks fine and updates arrays, but updates doesn't show on the <table></table> . Line {{ grid[row][column] }} doesn't show updated data. Where is my mistake?

Vue.component('grid-component', {
  template: `
  <table>
    <tbody>
      <tr v-for="(row, rowIndex) in grid">
        <td v-for="(column, columnIndex) in row" @click="onClickHandler" v-bind:row="rowIndex" v-bind:column="columnIndex">
          {{ grid[row][column] }}
        </td>
      </tr>
    </tbody>
  </table>
  `,
  props: ['grid', 'onClickHandler']
})

var app = new Vue({
  el: '#app',
  data: {
    grid: createGrid(columnsInGrid, rowsInGrid),
  },
  methods: {
    put(event) {
      const target = event.target;
      const column = target.getAttribute('column');
      const row = target.getAttribute('row');
      this.grid[row][column] = 1;
    }
  }
})

In index.html:

<div id="app">
    <div is="grid-component" v-bind:grid="grid" v-bind:on-click-handler="put"></div>
</div>

Answer 1

It doesn't work by design of vue reactivity. Please read https://v2.vuejs.org/v2/guide/list.html#Caveats . There is no technical way to detect changes like grid[index] .

Change squared braces the Vue setter like:

Vue.set(grid[row], column, 1)