欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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)點(diǎn)擊一個選項(xiàng)時,輸出的數(shù)組為空,當(dāng)取消或者點(diǎn)擊下一個選項(xiàng)時,才會出現(xiàn)該選項(xiàng)值且下一個選項(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),控制臺輸出為一個空數(shù)組:

這里寫圖片描述

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

這里寫圖片描述

這個問題形成的原因是當(dāng)點(diǎn)擊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)文章

最新評論