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

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

1. 逐个赋值

...
data() {
 return {
 name: '',
 sex: '',
 desc: ''
 }
}
...
// 逐个赋值
this.name = ''
this.sex = ''
this.desc = ''

这个方法比较笨，当然也可以实现效果，但是一个一个去重新赋值比较麻烦而且代码看起来也会比较乱。

下面这个方法肯定是你喜欢的，一行代码搞定～

2. 使用Object.assign()

MDN关于该方法的介绍：Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。

用法： Object.assign(target, ...sources)

第一个参数是目标对象，第二个参数是源对象，就是将源对象属性复制到目标对象，返回目标对象

其中就是将一个对象的属性copy到另一个对象

vue中：

this.$data 获取当前状态下的data

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

所以，下面就可以将初始状态的data复制到当前状态的data，实现重置效果：

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

当然，如果你只想重置data中的某一个对象或者属性：

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

扩展

Object.assign(target, ...sources) 方法还可以用来合并对象：

const o1 = { a: 1 };
const o2 = { b: 2 };
const o3 = { c: 3 };
const obj = Object.assign(o1, o2, o3);
console.log(obj); // { a: 1, b: 2, c: 3 }
console.log(o1); // { a: 1, b: 2, c: 3 }, 注意目标对象自身也会改变。

如果对象中含有相同属性，取最后一个属性：

const o1 = { a: 1, b: 1, c: 1 };
const o2 = { b: 2, c: 2 };
const o3 = { c: 3 };
const obj = Object.assign({}, o1, o2, o3);
console.log(obj); // { a: 1, b: 2, c: 3 } 属性取最后一个对象的属性

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。如有错误或未考虑完全的地方，望不吝赐教。

赞 (0)

相关推荐

  • vue 组件销毁并重置的实现

    方法1 当数据变更后,通过watch 监听,先去销毁当前的组件,然后再重现渲染.使用 v-if 可以解决这个问题 <template> <third-comp v-if="reFresh"/> </template> <script> export default{ data(){ return { reFresh:true, menuTree:[] } }, watch:{ menuTree(){ this.reFresh= false

  • Vue切换组件实现返回后不重置数据,保留历史设置操作

    版权 1.<router-view ></router-view> 外层包围<keep-alive> </keep-alive> keep-alive作用将组件实例缓存下来 <keep-alive> <router-view></router-view> </keep-alive> 2.清除组件缓存 使用keep-alive 的 exclude="组件名" 属性 <keep-alive

  • vue 强制组件重新渲染(重置)的两种方案

    数据通过异步操作后,对之前刚加载的数据进行变更后,发现数据不能生效 方案一 当数据变更后,通过watch 监听,先去销毁当前的组件,然后再重现渲染.使用 v-if 可以解决这个问题 <template> <third-comp v-if="reFresh"/> </template> <script> export default{ data(){ return { reFresh:true, menuTree:[] } }, watch

  • SpringBoot+Vue开发之Login校验规则、实现登录和重置事件

    一.Login校验规则 1.校验规则写法可参考Element-ui官网文档 https://element.eleme.cn/#/zh-CN/component/form 2.Login.vue页面  <template> <div class="login_container"> <!-- 登录块 --> <div class="login_box"> <!-- 头像 --> <div class=

  • vue+elementui 对话框取消 表单验证重置示例

    最近在写增删改查,在新增的时候要弹出对话框填写form表单信息,发现对话框右上角的小X和右下角的取消不是一个事件,我想在点击它们两个的时候都可以重置表单,最终解决,如下. vue: <el-dialog :title="titleName[dialogStatus]" :visible.sync="dialogFormVisible" @close="closeDialog" :close-on-click-modal="fals

  • 快速解决Vue、element-ui的resetFields()方法重置表单无效的问题

    问题: 使用this.$ref['form'] .resetFields()无法重置表单项 原因: 1.没有给表单添加ref属性 <el-form ref="form"></el-form> 2.表单项el-form-item没有添加prop属性,prop属性需要与input框绑定的属性一致 <el-form ref="form" :model="sizeForm" label-width="80px&qu

  • vuex如何重置所有state(可定制)

    在正式场景中我们经常遇到一个问题,就是登出页面或其他操作的时候,我们需要重置所有的vuex,让其变为初始状态, 那么,就涉及到了多种方法: 1.页面刷新: window.location.reload() 这个方法通过路由判断优化或是逻辑优化,始终页面时重新加载,就会导致用户体验很差,对浏览器来说也是一种不必要的负担,所以我尝试之后就放弃了. 2.写一个重置的方法然后调取 actions.resetVuex = function() { store.commit(state.a, null) s

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

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

  • 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如何修改data中数据问题

    vue如何修改data中数据问题

    目录 vue修改data中数据 vue中修改简单类型数据 vue中修改数组的方法 vue中修改对象的方法 关于删除 vue修改数据不生效,页面不刷新 vue中数据类型 vue数据侦听简易理解 数据更新后,页面不刷新的可能原因 vue修改data中数据 vue的data中保存一些数据,用于页面的渲染.有的时候,当我们手动对data中的数据修改时,vue却监听不到这些数据的变化,导致页面没有触发新一轮的更新. 注意:出现以上问题的原因在于,没有通过vue提供的方法对保存在data中的数据进行修改.强

  • vue 需求 data中的数据之间的调用操作

    我遇到过这种情况 就是在我的data中 会有数据调用data中的其他数据 如图 我的alertInfoType需要拿到screeningCondition中type的值 用过vue的都知道 我是不能写成alertInfoType:this.screeningCondition.type这种的 原理是什么?忘记了 知道了可以评论说下 所以 我们可以这样写 在mounted中直接赋值就可以了! 不知道你们有么有遇到过这种情况 反正我是遇到了两次了 第一次忘记怎么处理的了 ...... over 希望

  • vue 修改 data 数据问题并实时显示操作

    首先,定义一个变量: (以下以本人写的为例) 首先定义一个变量: 然后,给变量赋值: 如果想要修改数据,主要代码如下: 然后界面上要记得绑定数据id: 就Ok了. 补充知识:vue data中数组以及对象 属性改变时不能及时反馈到视图中问题的解决方式 1.vue 对数组更新检测 的机制又很明确的说明: 变异方法:Vue 包含一组观察数组的变异方法,所以它们也将会触发视图更新. 这些方法如下: push() pop() shift() unshift() splice() sort() rever

  • vue将data恢复到初始状态 && 重新渲染组件实例

    1. 将data恢复到初始状态 Object.assign(this.$data, this.$options.data()) // 初始化data 这里的 this.$options.data() 作为源对象, this.$data 作为目标对象.源对象覆盖并合并目标对象中的内容,即有则覆盖,无则添加. 2. 重新渲染组件 方法一:v-if(可以重置生命周期) 虽然能实现重新渲染,但不推荐首选 方法二:给组件加key值[推荐] 通过修改key的值,就会重新渲染该组件 方法三:this.$for

  • 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.js前后端数据交互之提交数据操作详解

    本文实例讲述了vue.js前后端数据交互之提交数据操作.分享给大家供大家参考,具体如下: 前端小白刚开始做页面的时候,我们的前端页面中经常会用到表单,所以学会提交表单也是一个基本技能,其实用ajax就能实现,但他的原始语法有点...额 ...复杂,所以这里给大家提供一种用vue-resource向后端提交数据. (1)第一步,先在template中写一个表单: <el-form :model="ruleForm" :rules="rules" ref=&quo

  • vue获取data数据改变前后的值方法

    场景:购物车增加商品数量同时更新bridge标志上的总商品个数,如果只是加上当前变化后的数量的话则之前原有的数量会被重新添加一遍造成计算错误.因此要减去变化前的数量才能得到添加的数量. 方法一: 直接watch监听data的数据 watch: { a (now,old) { console.log(now,old) } } old为旧的值now为更新后的值 方法二:自定义指令 通过自定义指令将更新前的值绑定到对应自定义指令的元素的dataset上然后在vue文件里面通过ref获取到元素来获取旧的

  • 详解vue的数据劫持以及操作数组的坑

    TL;DR 给data添加新属性的时候vm.$set(vm.info,'newKey','newValue') data上面属性值是数组的时候,需要用数组的方法操作数组,而不能通过index或者length属性去操作数组,因为监听不到属性操作的动作. 安装和初使用vue vue是构建用户界面的渐进式框架.所谓的渐进式:vue + components + vue-router + vuex + vue-cli可以根据需要选择相应的功能. 来串命令mkdir vue-apply;cd vue-ap

随机推荐