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

Question

https://jsfiddle.net/50wL7mdz/359940/

<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.

Answer 1

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>