我正在努力在 VueJs 中创建一个类似网格的组件。您可以在此处查看 JSFiddle：https://jsfiddle.net/masade/nrb9f4j2/
<datacell> 组件用于允许对任何单元格进行内联编辑。rows 的更改并将它们保存在本地存储中this.$parent.unshift(newrow) 在<addrow> 组件中将新创建的行推送到父对象问题是当我添加一个新行时，虽然它被添加到行本地存储中，但它并没有被监视更改
复制问题的步骤（在 JS fiddle 上）：
如果我做错了什么，请帮助我理解
【问题讨论】：
标签： vue.js local-storage vuejs2 vue-component
您偶然发现了 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))
}
【讨论】：
data(){
return{
items:localStorage.fetch()
}
}
watch:{
items:{
handler:function(items){
localStorage.save(items);
},
deep:true
}
}
您可以保存在项目中，并观看项目，如果项目发生了变化，它会更新
【讨论】：