快捷導(dǎo)航

Vue-input框checkbox強(qiáng)制刷新問(wèn)題

更新時(shí)間：2019年04月18日 16:10:03 作者：起啥名嘞

這篇文章主要介紹了Vue-input框checkbox強(qiáng)制刷新問(wèn)題，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

　　在引用input框的checkbox屬性時(shí)，選中后會(huì)出現(xiàn)數(shù)據(jù)已經(jīng)刷新，checkbox選中狀態(tài)不會(huì)改變。這時(shí)在事件觸發(fā)后可以調(diào)用this.$forceUpdate()，強(qiáng)制刷新頁(yè)面解決這個(gè)問(wèn)題。

　input框可以加入readonly="readonly"禁止更改

ps:vue中關(guān)于checkbox的問(wèn)題

在vue中寫(xiě)checkbox時(shí)，發(fā)現(xiàn)出現(xiàn)問(wèn)題：當(dāng)點(diǎn)擊一個(gè)選項(xiàng)時(shí)，輸出的數(shù)組為空，當(dāng)取消或者點(diǎn)擊下一個(gè)選項(xiàng)時(shí)，才會(huì)出現(xiàn)該選項(xiàng)值且下一個(gè)選項(xiàng)值不會(huì)出現(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)，控制臺(tái)輸出為一個(gè)空數(shù)組：

這里寫(xiě)圖片描述

當(dāng)再點(diǎn)擊微信控制臺(tái)輸出微博

這里寫(xiě)圖片描述

這個(gè)問(wèn)題形成的原因是當(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))
}

這里寫(xiě)圖片描述

總結(jié)，好了，本文就給大家介紹到這里，希望大家喜歡！

您可能感興趣的文章:

相關(guān)文章

vue 設(shè)置路由的登錄權(quán)限的方法
這篇文章主要介紹了vue 設(shè)置路由的登錄權(quán)限的方法，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2018-07-07
Element-ui Drawer抽屜按需引入基礎(chǔ)使用
這篇文章主要為大家介紹了Element-ui Drawer抽屜按需引入基礎(chǔ)使用，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-07-07
vue代碼分割的實(shí)現(xiàn)(codesplit)
這篇文章主要介紹了vue代碼分割的實(shí)現(xiàn)(codesplit)，做了代碼分割后，會(huì)將代碼分離到不同的bundle中，然后進(jìn)行按需加載這些文件，需要的朋友可以參考下
2018-11-11
vue3?setup語(yǔ)法糖之組件傳參(defineProps、defineEmits、defineExpose)示例詳
defineProps?和?defineEmits?都是只能在?<script?setup>?中使用的編譯器宏，他們不需要導(dǎo)入，且會(huì)隨著?<script?setup>?的處理過(guò)程一同被編譯掉，這篇文章主要介紹了vue3?setup語(yǔ)法糖之組件傳參(defineProps、defineEmits、defineExpose)示例詳解,需要的朋友可以參考下
2023-01-01
vue中字典的使用
這篇文章主要介紹了vue中字典的使用,本文通過(guò)示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧
2023-12-12
vue router點(diǎn)擊打開(kāi)新的標(biāo)簽頁(yè)的方法(最新推薦)
vue router點(diǎn)擊打開(kāi)新的標(biāo)簽頁(yè)的方法,只需要在router-link中加入target="_blank"即可在新的頁(yè)面打開(kāi)標(biāo)簽,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友參考下吧
2023-10-10
使用vue-markdown實(shí)現(xiàn)markdown文件預(yù)覽
Vue-Markdown 是一個(gè)輕量級(jí)且高效的庫(kù),用于在Vue.js應(yīng)用程序中渲染Markdown文本,下面我們來(lái)看看如何使用vue-markdown實(shí)現(xiàn)markdown文件預(yù)覽效果吧
2025-04-04
vue2里面ref的具體使用方法
本篇文章主要介紹了vue2里面ref的具體使用方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-10-10
vue input標(biāo)簽通用指令校驗(yàn)的實(shí)現(xiàn)
這篇文章主要介紹了vue input標(biāo)簽通用指令校驗(yàn)的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-11-11
Vue 3.0中Treeshaking特性及作用
Tree shaking 是一種通過(guò)清除多余代碼方式來(lái)優(yōu)化項(xiàng)目打包體積的技術(shù),就是在保持代碼運(yùn)行結(jié)果不變的前提下,去除無(wú)用的代碼,本文給大家介紹Vue 3.0中Treeshaking特性是什么,感興趣的朋友一起看看吧
2023-10-10