vue如何將對(duì)象中所有的key賦為空值
將對(duì)象中所有的key賦為空值
Object.assign的使用，當(dāng)然你也可以使用for去遍歷 然后再一一去賦值為空字符串，推薦使用（Object.assign）
先來(lái)看看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ò)問(wèn)題
如上圖所示，提示percent為空，web效果圖如下
如果是自測(cè)階段不想麻煩就直接在數(shù)據(jù)庫(kù)添加數(shù)據(jù)就行或者或者初始化方法賦初始值，最簡(jiǎn)便的還是在vue template里進(jìn)行判斷
代碼如下：
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue3?入口文件createApp函數(shù),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-04-04
Vue2.0基于vue-cli+webpack Vuex的用法(實(shí)例講解)
下面小編就為大家?guī)?lái)一篇Vue2.0基于vue-cli+webpack Vuex的用法(實(shí)例講解)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
vue electron應(yīng)用調(diào)exe程序的實(shí)現(xiàn)步驟
這篇文章主要介紹了vue electron應(yīng)用調(diào)exe程序的實(shí)現(xiàn)步驟,用Python寫了一個(gè)本地服務(wù)編譯成exe程序,在electron程序啟動(dòng)后,自動(dòng)執(zhí)行exe程序,文中有詳細(xì)的代碼示例供大家參考,需要的朋友可以參考下2024-02-02
vue實(shí)現(xiàn)數(shù)字動(dòng)態(tài)翻牌器
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)數(shù)字動(dòng)態(tài)翻牌器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
vue實(shí)現(xiàn)數(shù)字變換動(dòng)畫的示例代碼
本文主要介紹了vue實(shí)現(xiàn)數(shù)字變換動(dòng)畫的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04
如何在 Vue3 中使用 OpenLayers 實(shí)現(xiàn)事件 loadst
在這篇文章中,我將詳細(xì)介紹如何在 Vue3 + OpenLayers 中監(jiān)聽 loadstart 和 loadend 事件,并通過(guò) Vue3 Composition API 進(jìn)行代碼優(yōu)化,使其更加高效、健壯,感興趣的朋友一起看看吧2025-04-04
Vue.directive 實(shí)現(xiàn)元素scroll邏輯復(fù)用
這篇文章主要介紹了Vue.directive 實(shí)現(xiàn)元素scroll邏輯復(fù)用功能，文中給大家提到元素實(shí)現(xiàn)滾動(dòng)的條件有兩個(gè)，具體內(nèi)容詳情大家參考下本文2019-11-11
vue實(shí)現(xiàn)接口封裝的實(shí)現(xiàn)示例
本文主要介紹了vue實(shí)現(xiàn)接口封裝的實(shí)現(xiàn)示例,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-11-11
vue3+vite使用vite-plugin-svg-icons插件顯示本地svg圖標(biāo)的方法
這篇文章主要介紹了vue3+vite使用vite-plugin-svg-icons插件顯示本地svg圖標(biāo)的方法,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-12-12
Nuxt的動(dòng)態(tài)路由和參數(shù)校驗(yàn)操作
這篇文章主要介紹了Nuxt的動(dòng)態(tài)路由和參數(shù)校驗(yàn)操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11