Custom q-input v-model binding probem
-
Hello!
I am trying to make a “custom component” that inherits from “q-input”. But, it doesn’t work to achieve that there was a “v-model” binding.
If the component is inherited from the standard “input”, then the “v-model” binding works correctly. What am I doing that the binding for “q-input” does not work correctly?Code SandBox:
https://codesandbox.io/s/custom-q-input-v-model-binding-problem-ceq4f// Custom component “qInputExt.vue”
<template>
<!-- NOT WORK V-MODEL BINDING -->
<q-input v-bind="$attrs" v-on="$listeners" :value=“value” @input=“onInput($event.target.value)” /><!-- WORK V-MODEL BINDING -->
<!-- <input v-bind="$attrs" v-on="$listeners" :value=“value” @input=“onInput($event.target.value)” /> -->
</template><script>
export default {
name: ‘qInputExt’,
props: [‘value’],
model: {
prop: ‘value’,
event: [‘update’]
},
data () {
return {}
},
methods: {
onInput (val) {
console.log(’[onInput]’, val)
this.$emit(‘update’, val)
}
}
}
</script>// Test Component “TestPage.vue”
<template>
<q-page>
<q-input-ext v-model=“testValue” />
</q-page>
</template><script>
import qInputExt from ‘components/qInputExt’export default {
components: { qInputExt },
data () {
return {
testValue: ‘’
}
}
}
</script>
-
I think you will have more luck extending the q-input.
