Skip to content

[vue] vue中怎么重置data? #544

Open
@haizhilin2013

Description

@haizhilin2013
Collaborator

[vue] vue中怎么重置data?

Activity

jialudev

jialudev commented on Jul 3, 2019

@jialudev

只有问题没有答案吗

haizhilin2013

haizhilin2013 commented on Jul 3, 2019

@haizhilin2013
CollaboratorAuthor

@Mary5haw 目前还没有人回答,你来回答下呗

Aaron0525

Aaron0525 commented on Jul 3, 2019

@Aaron0525

使用Object.assign(),vm.$data可以获取当前状态下的data,vm.$options.data可以获取到组件初始化状态下的data,具体可以看vm.$options

ChasLui

ChasLui commented on Jul 6, 2019

@ChasLui
Object.assign(this.$data, this.$options.data())
boss1000

boss1000 commented on Aug 15, 2019

@boss1000

Object.assign()方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象
this.$data获取当前状态下的data
this.$options.data()获取该组件初始状态下的data。
bject.assign(this.$data, this.$options.data())

zhangxiaos

zhangxiaos commented on Sep 26, 2019

@zhangxiaos

初始状态下设置data数据的默认值,重置时直接bject.assign(this.$data, this.$options.data())

说明:
this.$data获取当前状态下的data
this.$options.data()获取该组件初始状态下的data(即初始默认值)
如果只想修改data的某个属性值,可以this[属性名] = this.$options.data()[属性名],如this.message = this.$options.data().message

InterfaceBoy

InterfaceBoy commented on Sep 26, 2019

@InterfaceBoy
Object.assign(this.$data, this.$options.data())

浅拷贝会影响到初始化的data吗?

coldtherain

coldtherain commented on Oct 9, 2019

@coldtherain

想问一句,这个使用场景在哪里?真的没碰见过需要重置的情况

censek

censek commented on Oct 11, 2019

@censek

想问一句,这个使用场景在哪里?真的没碰见过需要重置的情况

比如,有一个表单,表单提交成功后,希望组件恢复到初始状态,重置data数据。

nannan0109

nannan0109 commented on Oct 18, 2019

@nannan0109

@censek 重置的意思 是使数据恢复成操作之前吗 不是置空是吗?

wush12

wush12 commented on Nov 6, 2019

@wush12

1.使用Object.assign,可以重新绑定data的响应式。
2.使用$set
3.组件强制更新

DanielLeefu

DanielLeefu commented on Dec 23, 2019

@DanielLeefu

我们可以通过this.$data获取当前状态下的data,通过this.$options.data()获取该组件初始状态下的data。
然后只要使用Object.assign(this.$data, this.$options.data())就可以将当前状态的data重置为初始状态

czkm

czkm commented on Mar 1, 2020

@czkm

比如,有一个表单,表单提交成功后,希望组件恢复到初始状态,重置data数据。

为啥不写个方法 this.data.form = {}? 说实话没太懂重置data的意义 ,能请教一下吗

censek

censek commented on Mar 2, 2020

@censek

@censek 重置的意思 是使数据恢复成操作之前吗 不是置空是吗?

可以设置表单的默认值。

yuanqi3131

yuanqi3131 commented on Mar 4, 2020

@yuanqi3131

使用 Object.assign(this.$data,this.$options.data.call(this)) 这样写才有用

micahgao

micahgao commented on May 29, 2020

@micahgao
  1. 逐个赋值
  2. 使用 Object.assign(this.data, this.$options.data())
  3. 重置 data 中某个对象或属性:this.params = this.$options.data().params
vnues

vnues commented on Aug 28, 2020

@vnues

Object.assign(this.$data, this.$options.data())
挺好的 可以重置回初始值 优雅写法

SanChauncy

SanChauncy commented on Aug 31, 2020

@SanChauncy

浅拷贝

czkm

czkm commented on Aug 31, 2020

@czkm

比如,有一个表单,表单提交成功后,希望组件恢复到初始状态,重置data数据。

为啥不写个方法 this.data.form = {}? 说实话没太懂重置data的意义 ,能请教一下吗

这是我工作中用到的 this.formList = this.$options.data.call(this).formList

radio-qq

radio-qq commented on Dec 30, 2020

@radio-qq

想问一句,这个使用场景在哪里?真的没碰见过需要重置的情况

懒加载

radio-qq

radio-qq commented on Dec 30, 2020

@radio-qq
1. 逐个赋值

2. 使用 Object.assign(this.data, this.$options.data())

3. 重置 data 中某个对象或属性:this.params = this.$options.data().params

在加个this.$set()齐了

crush2020

crush2020 commented on Jan 29, 2021

@crush2020

没用过,用作记录

Object.assign(this.$data, this.$options.data())方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象
this.$data获取当前状态下的data
this.$options.data()获取该组件初始状态下的data(即初始默认值)
如果只想修改data的某个属性值,可以this[属性名] = this.$options.data()[属性名],如this.message = this.$options.data().message

crush2020

crush2020 commented on Jan 29, 2021

@crush2020

@czkm

比如,有一个表单,表单提交成功后,希望组件恢复到初始状态,重置data数据。

为啥不写个方法 this.data.form = {}? 说实话没太懂重置data的意义 ,能请教一下吗

我就是这样重置表单的数据的

MakeBetterMe

MakeBetterMe commented on Sep 29, 2021

@MakeBetterMe

@censek 重置的意思 是使数据恢复成操作之前吗 不是置空是吗?

聪明

hyj443

hyj443 commented on Oct 27, 2021

@hyj443

mark 学到了
Object.assign 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象
this.$data 获取当前状态下的data
this.$options.data()获取该组件初始状态下的data
Oject.assign(this.$data, this.$options.data())

yang-xianzhu

yang-xianzhu commented on Aug 1, 2022

@yang-xianzhu

this.$options.data(),返回的就是data的初始值。

AAA611

AAA611 commented on Aug 30, 2022

@AAA611

重新执行组件的 data 函数,这个函数可以在vm.$options中找到

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @haizhilin2013@ChasLui@MakeBetterMe@zhangxiaos@nannan0109

        Issue actions

          [vue] vue中怎么重置data? · Issue #544 · haizlin/fe-interview