Vue-input框checkbox強(qiáng)制刷新問題
更新時間：2019年04月18日 16:10:03 作者：起啥名嘞
這篇文章主要介紹了Vue-input框checkbox強(qiáng)制刷新問題，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下
在引用input框的checkbox屬性時，選中后會出現(xiàn)數(shù)據(jù)已經(jīng)刷新，checkbox選中狀態(tài)不會改變。這時在事件觸發(fā)后可以調(diào)用this.$forceUpdate()，強(qiáng)制刷新頁面解決這個問題。
input框可以加入readonly="readonly"禁止更改
ps:vue中關(guān)于checkbox的問題
在vue中寫checkbox時，發(fā)現(xiàn)出現(xiàn)問題：當(dāng)點擊一個選項時，輸出的數(shù)組為空，當(dāng)取消或者點擊下一個選項時，才會出現(xiàn)該選項值且下一個選項值不會出現(xiàn)：
<template>
<div class='mycheck' @click='check()'>
<input type="checkbox" v-model="value" value="短信" id='message'>
<label for="message" class='msg' ></label>
<label >短信</label>
<input type="checkbox" v-model="value" value="QQ" >
<label >QQ</label>
<input type="checkbox" v-model="value" value="微信" >
<label >微信</label>
<input type="checkbox" v-model="value" value="微博">
<label >微博</label>
<p>{{value}}</p>
</div>
</template>
<script>
export default {
data(){
return {
value:[]
}
},
methods:{
check(){
console.log(this.value)
}
}
</script>
當(dāng)點擊微博 選項，控制臺輸出為一個空數(shù)組：
當(dāng)再點擊微信 控制臺輸出微博
這個問題形成的原因是當(dāng)點擊checkbox時，先觸發(fā)click事件，打印數(shù)據(jù)，然后，才把checbox的value值傳給model，也就是傳入value中。
在我網(wǎng)上搜索解決的辦法中，發(fā)現(xiàn)使用setTimeout有奇效。用偽異步的方式去執(zhí)行這段代碼。（搜索的方法中有復(fù)雜的等有時間再仔細(xì)看，筆記后面附上地址。）
check(){
setTimeout(() => console.log(this.value))
}
總結(jié)，好了，本文就給大家介紹到這里，希望大家喜歡！
相關(guān)文章
vue 單頁應(yīng)用和多頁應(yīng)用的優(yōu)劣
這篇文章主要介紹了vue 單頁應(yīng)用和多頁應(yīng)用的優(yōu)劣，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2020-10-10
vue中Element-ui 輸入銀行賬號每四位加一個空格的實現(xiàn)代碼
我們在輸入銀行賬號會設(shè)置每四位添加一個空格，輸入金額，每三位添加一個空格。那么，在vue，element-ui 組件中，如何實現(xiàn)呢？下面小編給大家?guī)砹藇ue中Element-ui 輸入銀行賬號每四位加一個空格的實現(xiàn)代碼，感興趣的朋友一起看看吧2018-09-09
element-ui 中的 loading 加載功能,默認(rèn)是全屏加載效果,設(shè)置局部,需要自定義樣式或者修改樣式,下面給大家分享實例代碼,感興趣的朋友跟隨小編一起看看吧2024-05-05
vue將毫秒數(shù)轉(zhuǎn)化為正常日期格式的實例
今天小編就為大家分享一篇vue將毫秒數(shù)轉(zhuǎn)化為正常日期格式的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要為大家介紹了Vue冷門技巧遞歸組件實踐示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
在Vue組件中,data函數(shù)用于定義組件的數(shù)據(jù),本文主要介紹了Vue組件data函數(shù)的具體使用,文中通過示例代碼介紹的非常詳細(xì),需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-02-02
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)可改變購物數(shù)量的購物車，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-07-07
面包屑功能是我們在項目中經(jīng)常遇到的功能，今天小編使用Element-UI 進(jìn)行實現(xiàn)在vue項目中實現(xiàn)面包屑功能，具體實現(xiàn)方式大家跟隨小編一起學(xué)習(xí)吧2019-07-07
使用vue的v-for生成table并給table加上序號的實例代碼
這篇文章主要介紹了使用vue的v-for生成table并給table加上序號的相關(guān)資料,需要的朋友可以參考下2017-10-10
這篇文章主要為大家詳細(xì)介紹了vue2.x集成百度UEditor富文本編輯器的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-09-09