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

    qInput component with 2-ways-bind

    Help
    2
    4
    674
    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.
    • S
      Salim Larhrib last edited by

      Hi all,
      I have discovered Quasar 2 days ago and have started to play with. I need to do 2-ways-bind between a vue3 page and an included q-input descendant.
      It took time but it works. I need an advice if there is a better solution or my way to do is the right one.
      To be short, I have created a local v-model in the component and made a main model update with an emit event.

      <template>
        <div>
          <q-input
            class="col-md-2"
            v-model="innerValue"
            :label="pLabel"
            :placeholder="pPlaceholder"
            dense
            @input="updateValue($event)"
          />
        </div>
      </template>
      
      <script>
      export default {
        name: 'BaseInput',
        props: {
          modelValue: {
            type: [String, Number],
            default: '',
            required: true
          },
          pLabel: {
            type: String,
            required: true
          },
          pPlaceholder: {
            type: String,
            default: ''
          },
          pType: {
            type: String,
            default: 'text'
          },
          pIcon: {
            type: String,
            default: ''
          }
        },
        data () {
          return {
            innerValue: this.modelValue
          }
        },
        methods: {
          updateValue () {
            this.$emit('input', this.innerValue)
          },
          handleChange () { console.log('Change event') }
        },
        model: {
          // Quasar components waits "value" property when Vue3 sends "modelValue"
          // though v-model call.
          // We translate "value" property to "modelValue"
          type: String,
          prop: 'modelValue'
        }
      }
      

      To use the BaseInput component, I include it in my template like this:

      <!-- Field Start Date -->
      <BaseInput
        v-model="dName"
        label="User Name "
        placeholder="Insert unique user name"
      />
      ....
        data () {
          return {
            dName: 'Tartempion',
      .....
      

      I am Waiting for your comments and nice advices to improve this 2-ways binding solution.
      Thanks to all.

      dobbel 1 Reply Last reply Reply Quote 0
      • dobbel
        dobbel @Salim Larhrib last edited by dobbel

        @Salim-Larhrib

        Here’s an article about events and props in the context of child and parent components in Vue.
        https://medium.com/quick-code/vue-communication-patterns-an-intro-to-props-down-and-events-up-pattern-d53340d2c94

        You could also extend Qinput in BaseInput.
        https://dev.to/fdietz/vue-js-mixins-extending-components-and-high-order-components-2gfb

        1 Reply Last reply Reply Quote 0
        • S
          Salim Larhrib last edited by

          Hi Dobbel,
          Thank you for your links. I will take a look to mixins to extend existing Quasar components.
          I have also found a very interesting post which purposes a better solution with computed functions to manage the local v-model innerValue : https://forum.quasar-framework.org/topic/3208/adding-custom-functionality-to-quasar-s-components

          1 Reply Last reply Reply Quote 0
          • S
            Salim Larhrib last edited by

            Hello,
            Again another example to simplify 2 ways bindings thanks to computed getter and setter. https://tahazsh.com/vuebyte-computed-setters
            Regards.

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