Vue.js component doesn't react on data updates

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>

Have you read: vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats. There are certain caveats in array change detection that are almost certainly at play here. — webnoob
– webnoob, Commented Apr 2, 2017 at 11:11
@webnoob Aw, no, thanks! I create my component using this example vuejs.org/v2/guide/list.html#Components-and-v-for. But how is it works here without Vue.set()? — rel1x
– rel1x, Commented Apr 2, 2017 at 11:15
Sorry, there was another link for array detection: vuejs.org/v2/guide/list.html#Array-Change-Detection. Take a look at the suggestions there. — webnoob
– webnoob, Commented Apr 2, 2017 at 11:30

tony19 · Accepted Answer · 2022-07-15 01:29:08Z

4

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)

edited Jul 15, 2022 at 1:29

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Apr 2, 2017 at 13:21

damienix

6,7731 gold badge26 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

webnoob Over a year ago

That's what I had in mind but didn't have time to look into it more, was on the way out :)

rel1x Over a year ago

@webnoob you help me very much with both links, thanks!

Collectives™ on Stack Overflow

Vue.js component doesn't react on data updates

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related