v-model binds to value instead of checked with f7-input of type switch

[jsfeldman]

I'm new to using Framework7 so I apologize if this isn't a bug but something I'm misunderstanding, but it seems when you use v-model for an f7-input of type switch the v-model binds to the value of the input element instead of the checked attribute so when you flick the switch there is no response.

Example Template:

<div id='app'>
  <f7-input type="switch" v-model="toggle"></f7-input>
  <div v-show="toggle === true">
    Toggle is true
  </div>
  <div v-show="toggle === false">
    Toggle is false
  </div>
</div>

Example Javascript:

new Vue({
  el: '#app',
  data: {
    toggle: true
  }
})

This will set the checkbox input value to true and false instead of checked.

[centrual]

You'r right. But you can do this job with @change and :checked.

Example: https://jsfiddle.net/gd9whnt2/

[jsfeldman]

Ahh great! I noticed the same issue with radio buttons, but you can use the same solution.
Thanks a lot!

[centrual]

Your welcome 👍

[nolimits4web]

Looks like issue with Vue.js that can't recognize which type of v-model has to be added to custom component so it binds it to value like for text input. Just do it with @change and :checked