Question

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

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

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

复制问题的步骤（在JS小提琴上）：

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

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

Answer 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的方法，它使用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的{{1}}将为零，并且他们添加的第一行会有id 0.为了解决这个问题，我只需添加

gridStorage

Answer 2

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


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

您可以保存项目，并观看项目，如果项目已更改，则会更新

如何观看＆＃39;在VueJs中本地存储中新创建的行？

2 个答案: