vue如何重置data的所有属性

目录
  • 重置data的所有属性
    • 1.拿到data原始属性
    • 2.拿到当前的data
    • 3.复制到当前$data里面
  • 重置当前页面的data
    • 问题一
    • 问题二

重置data的所有属性

1.拿到data原始属性

this.$options.data()

2.拿到当前的data

this.$data

3.复制到当前$data里面

Object.assign(this.$data, this.$options.data());

重置当前页面的data

问题一

在某些情况下，需要重新使用data中的数据，但是data中的数据已经被各种表单、变量等赋值，那么怎么重置data的值呢？

解决方式：Object.assign()

JS相关函数

函数 含义
Object.assign(target, …sources) 将所有可枚举属性值从一个或多个源对象复制到目标对象

vue中相关函数

函数 含义
this.$data 当前状态下的data
this.$options.data() 该组件初始状态下的data

所以，可以通过下面的方式重置当前页面的data：

Object.assign(this.$data, this.$options.data.call(this));

或者，单独重置data中的某一个对象或者属性：

this.form = this.$options.data().form

问题二

用 this.$options.data() 重置组件data时，data() 里用this获取的props或methods都为undefined

原因

new Vue的时候传了一个对象，把该对象记为options，Vue将options中自定义的属性和Vue构造函数中定义的属性合并为vm.options，vm.options.data()中的this指向vm.options ，而methodA和B并没有直接挂在vm.options下，所以this.methodA和this.B为undefined。

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue使用assign巧妙重置data数据方式

    目录 使用assign巧妙重置data数据 Vue组件可能会有这样的需求 重置data的数据为初始状态 1.逐个赋值 2.使用Object.assign() 扩展 使用assign巧妙重置data数据 由于Object.assign()有上述特性,所以我们在Vue中可以这样使用: Vue组件可能会有这样的需求 在某种情况下,需要重置Vue组件的data数据.此时,我们可以通过this.$data获取当前状态下的data,通过this.$options.data()获取该组件初始状态下的data.

  • Vue 重置组件到初始状态的方法示例

    Vue 通过直接强制刷新 DOM 来达到重置组件的效果,这样可以重置一些组件的动画以及组件内初始的数据 强制重新生成 DOM 的实现 原理:强制重新生成 DOM 可以通过 Vue 中的 key 来实现.在 Vue 更新 Dom 时,如果 key 值相同则会对原有组件进行复用,如果不同,则会重新生成. 代码示例: 每次点击 refresh 按钮,Demo 组件都会重新生成 组件: /** * Demo.vue */ <template> <div>Demo</div> &

  • Vue 重置data的数据为初始状态操作

    在某些情况下,需要重新使用data中的数据,但是data中的数据已经被各种表单.变量等赋值,那么怎么重置data的值呢? 1. 逐个赋值 ... data() { return { name: '', sex: '', desc: '' } } ... // 逐个赋值 this.name = '' this.sex = '' this.desc = '' 这个方法比较笨,当然也可以实现效果,但是一个一个去重新赋值比较麻烦而且代码看起来也会比较乱. 下面这个方法肯定是你喜欢的,一行代码搞定- 2.

  • vue如何重置data的所有属性

    目录 重置data的所有属性 1.拿到data原始属性 2.拿到当前的data 3.复制到当前$data里面 重置当前页面的data 问题一 问题二 重置data的所有属性 1.拿到data原始属性 this.$options.data() 2.拿到当前的data this.$data 3.复制到当前$data里面 Object.assign(this.$data, this.$options.data()); 重置当前页面的data 问题一 在某些情况下,需要重新使用data中的数据,但是da

  • vue中如何动态绑定图片,vue中通过data返回图片路径的方法

    vue中如何动态绑定图片,vue中通过data返回图片路径的方法

    在项目中遇到需要动态加载图片路径,图片路径并非是从后台获取过来的数据. 因此在data中必须用require加载,否则会当成字符串来处理. HTML如下: JS如下: 以上这篇vue中如何动态绑定图片,vue中通过data返回图片路径的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们. 您可能感兴趣的文章: Vue.js中的图片引用路径的方式 基于vue 动态加载图片src的解决方法 vue cli使用绝对路径引用图片问题的解决

  • vue基础之data存储数据及v-for循环用法示例

    vue基础之data存储数据及v-for循环用法示例

    本文实例讲述了vue data存储数据及v-for循环用法.分享给大家供大家参考,具体如下: vue data里面存储数据 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net vue data里面存储数据</title> <style> </style> &l

  • vue里的data要用return返回的原因浅析

    官网的示例 var vm = new Vue({ el: '#example', data: { message: 'Hello' } }); 项目中的写法 data() { return { message: 'Hello' } } 为什么要把data变成函数并return属性呢? 组件是一个可复用的实例,当你引用一个组件的时候,组件里的data是一个普通的对象,所有用到这个组件的都引用的同一个data,就会造成数据污染. 将data封装成函数后,在实例化组件的时候,我们只是调用了data函数

  • vue 2.5.1 源码学习 之Vue.extend 和 data的合并策略

    1. 子类父类 2.Vue.extend()      //创建vue的子类 组件的语法器 Vue.extend(options) Profile().$mount('#app') // 挂在app上,并替换app 新建 initExend ==> Vue.extend 3. strat.data ==> if(!vm){子组件中data的值是一个方法function ==> mergeDataorFn()} // 数据的合并 ==> else {} //通过实例绑定的data 实

  • vue实现重置表单信息为空的方法

    背景 之前表单重置为空的话是这样写的 this.fromline = { access_provider_name: '', // 接入商名称 access_provider_address: '', // 接入商所属地区 remark: '' // 备注 } 直接把表单对象的属性设置为空 今天突然发现一个这样的玩意 少写了好多代码 (开心) this.$refs['fromline'].resetFields() 这个玩意也可以实现表单重置. 以上这篇vue实现重置表单信息为空的方法就是小编分

  • vue实例中data使用return包裹的方法

    在简单的vue实例中看到的Vue实例中data属性是如下方式展示的: let app= newVue({ el:"#app", data:{ msg:'' }, methods:{ } }) 在使用组件化的项目中使用的是如下形式: export default{ data(){ return { showLogin:true, // def_act: '/A_VUE', msg: 'hello vue', user:'', homeContent: false, } }, method

  • Vue组件为什么data必须是一个函数

    前言 我们需要先复习下原型链的知识,其实这个问题取决于 js ,而并非是 vue . function Component(){ this.data = this.data } Component.prototype.data = { name:'jack', age:22, } 首先我们达成一个共识(没有这个共识,请补充下 js 原型链部分的知识): 实例它们构造函数内的this内容是不一样的. Component.prototype ,这类底下的方法或者值,都是所有实例公用的. 解开疑问 基

随机推荐