Quasar inputs are not reactive in dynamic forms

[olaf]

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?

[olaf]

Hi,

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

[muffin_mclay]

This post is deleted!