Vue.js input (checkbox radio) does not toggle when using :checked with @input or @click together

Question

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <label>                   
    <input 
    type="checkbox"
            name="demo"
    :checked="isChecked"
            @input="someMeth('A')" 
    value="A"/> 
    A
 </label>
 <label>
    <input
    type="radio" 
    name="demo"
    :checked="isChecked"
    @input="someMeth('B')" 
    value="B"/> 
    B
 </label>
 <div>
  {{somedata}}
 </div>
</div>

Clicking on input(checkbox or radio) does not toggle its status.

Remove either :checked or @input would solved the problem.

but I need them both.

@click does the same thing.

W Kristianto · Accepted Answer · 2018-06-13 01:42:02Z

3

in vue.js,checkbox's value is bind using v-model.

new Vue({
  el: '#app',
  data: {
    checktype: 'checkbox',
    somedata: [],
    isChecked: false,
    isChecked2: false,
  },
  methods: {
  	someMeth(val) {
    		this.somedata.push(val)
    }
  }
})

<script src="https://unpkg.com/vue"></script>

<div id="app">
    <label>
        <input 
            :type="checktype"
            :name="demo"
            v-model="isChecked"
            @input="someMeth('A')" 
            value="A"/>	
            A
    </label>
    <lable>  
        <input
            :type="checktype" 
            :name="demo"
            v-model="isChecked2"
            @input="someMeth('B')" 
            value="B"/>	
            B
    </lable>
    <div>
        {{somedata}}
    </div>
</div>

edited Jun 13, 2018 at 1:42

W Kristianto

9,3737 gold badges51 silver badges73 bronze badges

answered Jun 13, 2018 at 1:27

Kaicui

3,8811 gold badge18 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

chriszhxi Over a year ago

I'm using :checked because it's 'pre-checked' status from a method. I have other situation using :checked and v-model together, like a radio, it's working fine.

Jack jdeoel Over a year ago

If you use v-model, you don't need :checked coz v-model does for checking status @chriszhxi

chriszhxi Over a year ago

v-model is 2-way binding, :checked it's just the initial status, this status does not change.

Derek Pollard Over a year ago

This is definitely the answer @chriszhxi, please make sure you're following the implementation example Kaicui provided

Collectives™ on Stack Overflow

Vue.js input (checkbox radio) does not toggle when using :checked with @input or @click together

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related