vue如何将对象中所有的key赋为空值
⽬录
将对象中所有的key赋为空值
先来看看Object.assign的基本⽤法
vue空值报错问题
将对象中所有的key赋为空值
Object.assign的使⽤,当然你也可以使⽤for去遍历然后再⼀⼀去赋值为空字符串,推荐使⽤(Object.assign)
先来看看Object.assign的基本⽤法
js 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⾥进⾏判断
代码如下:
以上为个⼈经验,希望能给⼤家⼀个参考,也希望⼤家多多⽀持。