F7 vue - v-model:value binding throwing an error - no two way binding possible

1

Hi - im pretty new to f7 but know vue ok .

I am trying to get a two way data bind between an input component , But the input field , when testing throws an error when i type new data into it .
error
[Vue warn]: Invalid prop: type check failed for prop "value". Expected String, Number, Array, Date, Object, got InputEvent

my code

<f7-list-input
      label="Voucher Code"
      type="text"
      placeholder="Voucher Code"
     v-model:value="voucherCode"
   ></f7-list-input>

…

export default {

	mixins: [ApiMixin],

	data() {
	  return {
	    voucherCode: 'sdfsd',
			saleDate: [new Date()],
	  };
	},

does anyone know what i am doing wrong here ? and why i am unable to find data to an f7 component … its a pretty basic need , if i cant work this out i need to go use a framework that allows me to find to its components , otherwise i cant get data in and out of them …

Thanks in advance …

2

You sure you on latest Framework7 v6 and Vue.js v3? It works totally fine for me https://codesandbox.io/s/infallible-surf-hztip?file=/src/pages/Home.vue

1 Like
3

Yea i think you are right … it must be something to do with my setup … and yea maybe this functionality is not present in the version i have … i did set it up quite a while ago . Thanks !

4

Just to update on this . Yes was the version … i think i was running 5.8 or something … installed latest version and indeed v-model works as it should. cheers