Question

尝试将数据呈现到<table></table>并添加事件处理程序以更新数据。我的初始数据是数组数组。处理程序只是更新这些数组。表格呈现，处理程序分叉并更新数组，但更新不会显示在<table></table>上。行{{ grid[row][column] }}不会显示更新的数据。我的错误在哪里？

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;
    }
  }
})

在index.html中：

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

Answer 1

通过设计vue反应性不起作用。请阅读https://vuejs.org/v2/guide/list.html#Caveats。没有技术方法可以检测grid[index]等更改。

更改平方支持Vue setter，如：

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

Vue.js组件对数据更新没有反应

1 个答案: