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

Question

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

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

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

复制问题的步骤(在 JS fiddle 上):

• 点击添加行并输​​入要添加的名称
• 添加行后，点击第二列(年份)并更新
• 不会更新对新添加行的任何更改
• 但是，如果您刷新页面并再次修改，我可以再次更新。

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

Answer 1

您无意中发现了其中一个 change detection caveats在 Vue 中。 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。 p>

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

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

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

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