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

尝试将数据呈现为<table></table>并添加事件处理程序以更新数据。我的初始数据是数组的数组。处理程序只是更新这些数组。表呈现，处理程序叉罚款和更新阵列，但更新不显示在<table></table>。 {{ grid[row][column] }}行不显示更新的数据。我的错误在哪里？Vue.js组件对数据更新没有反应

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>

来源

2017-04-02 rel1x

你读过：https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats。阵列变化检测中有一些注意事项几乎肯定会在这里发挥作用。 – webnoob

另外，你使用的是什么版本的Vue？ – webnoob

@webnoob哦，不，谢谢！我使用这个例子创建我的组件https://vuejs.org/v2/guide/list.html#Components-and-v-for。但是如果没有'Vue.set（）'，它是如何工作的？ – rel1x

它不通过VUE反应的设计工作。请阅读https://vuejs.org/v2/guide/list.html#Caveats。没有技术方法来检测像grid[index]这样的更改。

变化平方括号中的Vue的制定者，如：

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

来源

2017-04-02 13:21:02 damienix

谢谢，这是工作。 – rel1x

不客气:) – damienix

这就是我的想法，但没有时间更多地看着它，正在出路:) – webnoob

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

回答

相关问题