如何在 VueJs 的本地存储中“观察”新创建的行？

Posted 2023-03-05

【中文标题】如何在 VueJs 的本地存储中“观察”新创建的行？

【英文标题】：How to 'watch' newly created rows in local storage in VueJs?

【发布时间】：2017-10-12 11:22:12

【问题描述】：

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

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

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

复制问题的步骤（在 JS fiddle 上）：

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

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

【参考方案1】：

您偶然发现了 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 的方法，该方法使用$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))

【讨论】：

非常感谢，这两天一直在努力理解这一点:)

【参考方案2】：

data()
   return
     items:localStorage.fetch()
   



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

您可以保存在项目中，并观看项目，如果项目发生了变化，它会更新

【讨论】：

我也在做同样的事情，它将组件应用于新创建的行。 js 中的第 74 行 - jsfiddle.net/masade/nrb9f4j2