您好,登錄后才能下訂單哦!
小編給大家分享一下Vue-input框checkbox強(qiáng)制刷新的示例分析,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
在引用input框的checkbox屬性時(shí),選中后會出現(xiàn)數(shù)據(jù)已經(jīng)刷新,checkbox選中狀態(tài)不會改變。這時(shí)在事件觸發(fā)后可以調(diào)用this.$forceUpdate(),強(qiáng)制刷新頁面解決這個(gè)問題。
input框可以加入readonly="readonly"禁止更改
ps:vue中關(guān)于checkbox的問題
在vue中寫checkbox時(shí),發(fā)現(xiàn)出現(xiàn)問題:當(dāng)點(diǎn)擊一個(gè)選項(xiàng)時(shí),輸出的數(shù)組為空,當(dāng)取消或者點(diǎn)擊下一個(gè)選項(xiàng)時(shí),才會出現(xiàn)該選項(xiàng)值且下一個(gè)選項(xiàng)值不會出現(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)點(diǎn)擊微博 選項(xiàng),控制臺輸出為一個(gè)空數(shù)組:
當(dāng)再點(diǎn)擊微信 控制臺輸出微博
這個(gè)問題形成的原因是當(dāng)點(diǎn)擊checkbox時(shí),先觸發(fā)click事件,打印數(shù)據(jù),然后,才把checbox的value值傳給model,也就是傳入value中。
在我網(wǎng)上搜索解決的辦法中,發(fā)現(xiàn)使用setTimeout有奇效。用偽異步的方式去執(zhí)行這段代碼。(搜索的方法中有復(fù)雜的等有時(shí)間再仔細(xì)看,筆記后面附上地址。)
check(){ setTimeout(() => console.log(this.value)) }
以上是“Vue-input框checkbox強(qiáng)制刷新的示例分析”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學(xué)習(xí)更多知識,歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。