vue如何將對(duì)象中所有的key賦為空值
將對(duì)象中所有的key賦為空值
Object.assign的使用，當(dāng)然你也可以使用for去遍歷 然后再一一去賦值為空字符串，推薦使用（Object.assign）
先來看看Object.assign的基本用法
Object.assign方法用于對(duì)象的合并，第一個(gè)參數(shù)（目標(biāo)對(duì)象），可以有第二個(gè)，第三個(gè)參數(shù)，都是源對(duì)象，將源對(duì)象（source）的所有可枚舉屬性，復(fù)制到目標(biāo)對(duì)象（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方法的第一個(gè)參數(shù)是目標(biāo)對(duì)象，后面的參數(shù)都是源對(duì)象
言歸正傳，有時(shí)候會(huì)碰到的需求是，有多個(gè)input框，每個(gè)input框都v-modei綁定了對(duì)應(yīng)的value值，當(dāng)點(diǎn)擊重置按鈕時(shí)，要清空所有input中的值，這時(shí)候可以用到Object.assign方法，具體怎么實(shí)現(xiàn)看代碼
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：{
? //這時(shí)候如果你隨意在輸入框輸入值，點(diǎn)擊重置按鈕 ，只需要重新給valueData復(fù)制 就能清空input中的值了
?toReset(){
?this.valueData = Object.assign({},values)
?}
}vue空值報(bào)錯(cuò)問題
如上圖所示，提示percent為空，web效果圖如下
如果是自測(cè)階段不想麻煩就直接在數(shù)據(jù)庫添加數(shù)據(jù)就行或者或者初始化方法賦初始值，最簡(jiǎn)便的還是在vue template里進(jìn)行判斷
代碼如下：
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vuejs從數(shù)組中刪除元素的示例代碼,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-02-02
vue使用計(jì)算屬性完成動(dòng)態(tài)滑竿條制作
這篇文章主要介紹了vue使用計(jì)算屬性完成動(dòng)態(tài)滑竿條制作，文章圍繞計(jì)vue算屬制作動(dòng)態(tài)滑竿條的相關(guān)代碼完成內(nèi)容,需要的朋友可以參考一下2021-12-12
下面小編就為大家分享一篇在vue項(xiàng)目中,使用axios跨域處理，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了Vue如何設(shè)置button的disable屬性，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue處理循環(huán)數(shù)據(jù)流程示例精講
這篇文章主要介紹了Vue處理循環(huán)數(shù)據(jù)流程，這個(gè)又是一個(gè)編程語言，?模版語法里面必不可少的一個(gè)，?也是使用業(yè)務(wù)場(chǎng)景使用最多的一個(gè)環(huán)節(jié)。所以學(xué)會(huì)使用循環(huán)也是重中之重了2023-04-04
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)簡(jiǎn)單登錄界面，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-06-06
vue-cli項(xiàng)目中遇到的eslint的坑及解決
這篇文章主要介紹了vue-cli項(xiàng)目中遇到的eslint的坑及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
Elementui如何限制el-input框輸入小數(shù)點(diǎn)
這篇文章主要介紹了Elementui如何限制el-input框輸入小數(shù)點(diǎn)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
Vant?UI中van-collapse下拉折疊面板默認(rèn)展開第一項(xiàng)的方法
之前做項(xiàng)目的時(shí)候,使用了Collapse折疊面板,下面這篇文章主要給大家介紹了關(guān)于Vant?UI中van-collapse下拉折疊面板默認(rèn)展開第一項(xiàng)的相關(guān)資料,需要的朋友可以參考下2022-03-03
VUE實(shí)現(xiàn)強(qiáng)制渲染,強(qiáng)制更新
今天小編就為大家分享一篇VUE實(shí)現(xiàn)強(qiáng)制渲染,強(qiáng)制更新，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-10-10