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

    q-input @input not working

    Framework
    2
    4
    3313
    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.
    • J
      javierrodrigo last edited by

      Hi, I am using q-input with v-model two ways data binding this way:

      Parent:

      <modal-task-name v-model:name="taskToSubmit.name"/>
      

      Child:

      <template>
        <div class="row q-mb-sm">
          <q-input :rules="[val => !!val || 'Field is required']" outlined  
              label="Task name" class="col" autofocus clearable 
              :value="name"
              @input="(event) => $emit ('update:name', event.target.value)" 
          />
        </div>
      </template>
      
      <script>
      export default {
        props: ['name']
      }
      </script>
      

      Changes in the prop “name” are not passed to the parent. However, if I change the q-input with a input component it works fine. Any idea why?

      1 Reply Last reply Reply Quote 0
      • J
        javierrodrigo last edited by

        By the way using:
        Pkg quasar… v2.0.0-beta.9
        Pkg @quasar/app… v3.0.0-beta.9

        1 Reply Last reply Reply Quote 0
        • N
          nededa last edited by nededa

          This post is deleted!
          1 Reply Last reply Reply Quote 0
          • J
            javierrodrigo last edited by javierrodrigo

            Thanks. When I use :name.sync with quasar V2 (vue 3) it says deprecated… That’s why I was using the V3 way. Johnny#5034 on discord chat helped me out
            https://discord.com/channels/415874313728688138/806171748046733332/818570585801752676
            Parent:

            <modal-task-name v-model:name="taskToSubmit.name"/>
            

            Child:

            <q-input :rules="[val => !!val || 'Field is required']" 
                 :modelValue="name"
                 @update:modelValue="event => $emit('update:name', event)" 
                 outlined label="Task name" class="col" autofocus clearable 
               />
            
            1 Reply Last reply Reply Quote 0
            • First post
              Last post