CODEWITHSUNDEEP
google-chromecheckboxvue.js
a.dahl
a.dahl

Reputation: 3

vue.js checkboxes not updating properly in chrome

I am new to Vue.js. Basically, I have two checkboxes and I want them to behave like a radio-buttons (I know I can use a radio but I wanna know what the problem is) It works fine in Safari, but not in Chrome.

these are the checkboxes:

<label class="list-display" for="list-box">
   <input type="checkbox" id="list-box" v-model="list"
    v-on:click='mini=!list'>
   <span class="switch">
     <p>list</p>
   </span>
</label>

<label class='list-display' for="mini-box">
   <input type="checkbox" id="mini-box" v-model="mini"
    v-on:click='list=!mini'>
   <span class="switch">
     <p>mini</p>
   </span>
</label>

and in data I declare

list: true,
mini: false,

It checks the first box #mini-box when it loads but when the boxes are clicked the both toggle true or false

Thank you for any help!

Upvotes: 0

Views: 2973

Answers (1)

mannok
mannok

Reputation: 1851

Due to different browser behavior, you can bind event using $nextTick like this to prevent inconsistency. Seems this is more readable and traceable than using watcher.

<label class="list-display" for="list-box">
   <input type="checkbox" id="list-box" :value="list" @click="$nextTick(()=>{mini = !(list=$event.target.checked)})">
   <span class="switch">
     <p>list</p>
   </span>
</label>

<label class='list-display' for="mini-box">
   <input type="checkbox" id="mini-box" :value="mini" @click="$nextTick(()=>{list = !(mini=$event.target.checked)})">
   <span class="switch">
     <p>mini</p>
   </span>
</label>

Upvotes: 1

Related Questions