Quasar inputs are not reactive in dynamic forms



  • Hi,

    I would like to build dynamic forms like is show here : https://codesandbox.io/s/github/e-schultz/vue-dynamic-components/tree/master/?initialpath=%2Fdemo-5&module=%2Fsrc%2Fcomponents%2FDemoFive.vue

    There is TextInput template for a name field like this:

    <template>
      <div>
        <label>{{label}}</label>
    
        <input type="text"
               :name="name"
               :value="value"
               @input="$emit('input',$event.target.value)"
               :placeholder="placeholder
               ">
              {{value}} <!-- I have add this to show the problem -->
      </div>
    </template>
    <script>
    export default {
      name: 'TextInput',
      props: ['placeholder', 'label', 'name', 'value']
    }
    </script>
    

    When you type something in the name field its value is printed-out directly via the {{value}}.

    It is not printing any more when I change it to a q-input like this:

    <template>
      <div>
        <label>{{label}}</label>
    
        <q-input type="text"
              outlined
               :name="name"
               :value="value"
               @input="$emit('input',$event.target.value)"
               :placeholder="placeholder
               "/>
               {{value}}
      </div>
    </template>
    <script>
    export default {
      name: 'TextInput',
      props: ['placeholder', 'label', 'name', 'value']
    }
    </script>
    

    Also when the focus is lost of the editor it set back the value where it is starts.

    Is this a bug or how can I make this work?



  • Hi,

    I found a solution. I had to change @input="$emit('input',$event.target.value)" into @input="$emit('input', $event)"



  • This post is deleted!

Log in to reply