No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    Custom q-input v-model binding probem

    Help
    2
    2
    913
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • 9
      9223000 last edited by 9223000

      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>

      1 Reply Last reply Reply Quote 0
      • dobbel
        dobbel last edited by

        I think you will have more luck extending the q-input.

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

        1 Reply Last reply Reply Quote 0
        • First post
          Last post