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

Question

我正在努力在 VueJs 中创建一个类似网格的组件。您可以在此处查看 JSFiddle：https://jsfiddle.net/masade/nrb9f4j2/

在上面的 fiddle 中，<datacell> 组件用于允许对任何单元格进行内联编辑。
我正在 'watch'-ing 更改 rows 并将它们保存在本地存储中
<addrow> 组件中的 this.$parent.unshift(newrow) 正在将新创建的行推送到父对象

问题是当我添加一个新行时，虽然它被添加到本地存储的行中，但它没有被监视变化

重现问题的步骤（在 JS fiddle 上）：

单击“添加行”并输入要添加的名称
添加行后，单击第二列（年份）并更新它
不会更新对新添加行的任何更改
但是如果你刷新页面，然后再次修改，我可以再次更新。

如果我做错了什么请帮助我理解

Answer 1

data(){
   return{
     items:localStorage.fetch()
   }
}


watch:{
   items:{
     handler:function(items){
        localStorage.save(items);
     },
     deep:true
   }
}

可以存入item，也可以watch items，如果item有变化，会updata

Answer 2

您无意中遇到了 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 不知道您刚刚添加的任何属性。

我向您的 fiddle 添加了一个名为 makeNewRow 的方法，它使用 $set 方法正确地添加了您需要 newrow 的属性。

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

然后我在 mounted 和您的 addRow 方法中调用它。这修复了你的错误。这是更新后的 fiddle.

注意：我修复了您的代码中的另一个错误。如果有人打开您的应用程序并且之前在他们的本地存储中没有 grid-vue-local，那么 gridStorage 的 uid 将为零，第一个他们添加的行的 ID 为 0。为了解决这个问题，我简单地添加了

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

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

How to 'watch' newly created rows in local storage in VueJs?

local-storage

vue.js

vue-component

vuejs2