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.

    https://vuejs.org/v2/api/#extends


Log in to reply