vue.js - 如何在VueJs的本地存储中 'watch'新创建的行？

我正在努力在VueJs中创建类似于网格的组件。您可以在这里看到JSFiddle:https://jsfiddle.net/masade/nrb9f4j2/

在上面的小提琴中，<datacell>组件用于允许对任何单元格进行内联编辑。

我正在“监视”-更改rows并将其保存在本地存储中

this.$parent.unshift(newrow)组件

中的<addrow>将新创建的行推送到父对象

问题是，当我添加新行时，尽管它正在添加到行本地存储中，但并未监视更改

复制问题的步骤(在JS小提琴上):

单击添加行并输​​入名称以添加

添加行后，单击第二列(年份)并更新

对新添加的行的任何更改都不会更新

但是，如果刷新页面并再次对其进行修改，则可以再次对其进行更新。

请帮助我了解我做错了什么

最佳答案

您偶然发现了Vue中的change detection caveats之一。 Vue无法检测到何时使用该对象的索引向该对象添加了属性。

您可以这样定义newrow:

data: function(){
    return {
        newrow : {}
    }
},

这意味着newrow没有属性。之后，您总是使用索引将属性添加到newrow中，如下所示:

this.$parent.cols.map(function(col,index){
  if(typeof newrow[col.m] == "undefined")
    newrow[col.m] = "";
})

这意味着Vue不了解您刚刚添加的任何属性。

我在您的小提琴中添加了一种名为makeNewRow的方法，该方法使用newrow方法将所需的属性正确添加到$set中。

makeNewRow(){
    this.newrow = {};
    this.$parent.cols.map((col,index) => this.$set(this.newrow, col.m, null))
},

然后，我用mounted和您的addRow方法调用它。这可以修复您的错误。这是更新的fiddle。

注意:我修复的代码中还有一个错误。如果有人打开了您的应用程序，并且以前在其本地存储中没有grid-vue-local，则uid的gridStorage将为零，并且他们添加的第一行的ID为0。

save: function (rows) {
  gridStorage.uid = rows.length
  localStorage.setItem(STORAGE_KEY, JSON.stringify(rows))
}