vue如何将对象中所有的key赋为空值
更新时间：2022年04月08日 11:58:01 作者：zky的博客
这篇文章主要介绍了vue如何将对象中所有的key赋为空值，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
将对象中所有的key赋为空值
Object.assign的使用，当然你也可以使用for去遍历 然后再一一去赋值为空字符串，推荐使用（Object.assign）
先来看看Object.assign的基本用法
Object.assign方法用于对象的合并，第一个参数（目标对象），可以有第二个，第三个参数，都是源对象，将源对象（source）的所有可枚举属性，复制到目标对象（target）。
const target = {a:1};
const source1 = { b: 2 };
const source2 = { c: 3 };
Object.assign(target, source1, source2);
console.log(target) // {a:1, b:2, c:3}注意：Object.assign方法的第一个参数是目标对象，后面的参数都是源对象
言归正传，有时候会碰到的需求是，有多个input框，每个input框都v-modei绑定了对应的value值，当点击重置按钮时，要清空所有input中的值，这时候可以用到Object.assign方法，具体怎么实现看代码
html代码
<input type='text' v-model='valueData.value1'></input> <input type='text' v-model='valueData.value2'></input> <input type='text' v-model='valueData.value3'></input> <button @click=‘toReset'>重置（清空输入框）<button>
js 代码
const values = {
value1:'',
value2:'',
value3:'',
}
data(){
return {
valueData:Object.assign({},values)
}
},
methods：{
//这时候如果你随意在输入框输入值，点击重置按钮 ，只需要重新给valueData复制 就能清空input中的值了
toReset(){
this.valueData = Object.assign({},values)
}
}vue空值报错问题
如上图所示，提示percent为空，web效果图如下
如果是自测阶段不想麻烦就直接在数据库添加数据就行或者或者初始化方法赋初始值，最简便的还是在vue template里进行判断
代码如下：
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了Vue3 入口文件createApp函数,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-04-04
Vue2.0基于vue-cli+webpack Vuex的用法(实例讲解)
下面小编就为大家带来一篇Vue2.0基于vue-cli+webpack Vuex的用法(实例讲解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
这篇文章主要介绍了vue electron应用调exe程序的实现步骤,用Python写了一个本地服务编译成exe程序,在electron程序启动后,自动执行exe程序,文中有详细的代码示例供大家参考,需要的朋友可以参考下2024-02-02
这篇文章主要为大家详细介绍了vue实现数字动态翻牌器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
本文主要介绍了vue实现数字变换动画的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-04-04
如何在 Vue3 中使用 OpenLayers 实现事件 loadst
在这篇文章中,我将详细介绍如何在 Vue3 + OpenLayers 中监听 loadstart 和 loadend 事件,并通过 Vue3 Composition API 进行代码优化,使其更加高效、健壮,感兴趣的朋友一起看看吧2025-04-04
这篇文章主要介绍了Vue.directive 实现元素scroll逻辑复用功能，文中给大家提到元素实现滚动的条件有两个，具体内容详情大家参考下本文2019-11-11
本文主要介绍了vue实现接口封装的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2023-11-11
vue3+vite使用vite-plugin-svg-icons插件显示本地svg图标的方法
这篇文章主要介绍了vue3+vite使用vite-plugin-svg-icons插件显示本地svg图标的方法,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-12-12
这篇文章主要介绍了Nuxt的动态路由和参数校验操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
最新评论