IE11與其他瀏覽器在checkbox上綁定v-model值的改變時機

環境：

M$ MVC4 Razor + Vue + jQuery

Vue版本2.6.10

jQuery版本1.10.2

需要實現當某個checkbox被改變狀態後，依據被改變的狀態連動其他值

按照以前寫jQuery的寫法

就是抓這個checkbox的id，然後下.prop('checked')

這方法需要jQuery 1.6以上才會準確，但目前手上正在用的是1.10，所以沒問題

但想說都用Vue了，那我直接拿綁定在checkbox上的v-model值不就好了嗎？

這樣就不必再下jQuery取值了，多方便

現在我有一個model為Item

Item:{
IsSelected:false
,CanSel:true
,CanSelCtrl:true
}

然後把它綁在checkbox上：

<input v-bind:id="1" v-on:click="ChkCtrl(Item)" type="checkbox" v-bind:value="true" v-model="Item.IsSelected" v-bind:disabled="!(Item.CanSel) || !(Item.CanSelCtrl)">

接著實做了ChkCtrl...

methods: {

    ChkCtrl:function(item){

    var status = item.IsSelected;//直接抓model的內容

    console.log(status);//輸出看結果

    },
}

原本以為這樣寫萬無一失

但後來發現...在Chrome(81)、Edge(81)、FireFox(76)環境下

按下checkBox後的ChkCtrl中，會輸出false

但是在IE11，則會輸出true

翻船啦

這代表在按下瞬間，IE11是已經將checkbox的值換到Item.IsSelected上面去

但是Chrome、Edge、FireFox則還沒

要解決這問題

目前我採用的方式是走回頭路

改傳checkbox的id，直接用prop抓checked值

<input v-bind:id="1" v-on:click="ChkCtrl('1')" type="checkbox" v-bind:value="true" v-model="Item.IsSelected" v-bind:disabled="!(Item.CanSel) || !(Item.CanSelCtrl)">

methods: {

    ChkCtrl:function(chkid){

    var status = $("#"+chkid).prop('checked');//改用jquery的prop抓值

    console.log(status);//輸出看結果

    },
}

這麼一來就能確保Chrome、Edge、FireFox、IE 11的做動都會如預期了