木灵鱼儿

木灵鱼儿

阅读：1449

最后更新：2021/07/02/ 11:25:32

vue骚操作之重置data对象

简单说下使用场景，你使用一个dialog组件，弹窗时要加载数据，关闭后要清理数据，以防下次使用报错或者数据残留，如果在data中写了过多的属性，或者层级很深的引用对象啥的，为了方便还原，你可能会一个个的写。

onClose() {
  this.xxx = xxx;
  this.xxx.xxx = xxx;
  this.xxx.xxx = xxx;
  this.xxx.xxx = xxx;
}

对多个值进行赋值操作。

但是，这样实在是太难了，有没有一种简单的方法，就像表单重置一样。

答案当然是有的：

onClose() {
  Object.assign(this.$data, this.$options.data());
}

使用该方法，可以将data里的所有数据重置为默认初始值。

this.$data获取的是当前data对象

this.$options.data()获取的是该组件初始状态下的data

如果想还原某一个指定属性，可以单独设置

onClose() {
  this.xxx = this.$options.data().xxx;
}
文章分类 vue 项目实战
文章标签 datavue重置
木灵鱼儿

木灵鱼儿

发布了 718 篇文章获得点赞 0获得阅读 1449

版权申明

本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可，禁止转载。

one
two
three

关于作者

站点职位 博主
获得点赞 0
文章被阅读 1449

相关文章

利用原生css实现hash哈希定位跳转偏移量处理利用原生css实现hash哈希定位跳转偏移量处理
ts实战：给没有类型声明的第三方库编写一个类型声明文件ts实战：给没有类型声明的第三方库编写一个类型声明文件
利用发布订阅模式封装一个IntersectionObserver利用发布订阅模式封装一个IntersectionObserver
typecho 自定义分类和分类高亮处理typecho 自定义分类和分类高亮处理
ts封装一个localStorage和sessionStorage的类ts封装一个localStorage和sessionStorage的类

目录树