input v-model does not bind correct

[olaf]

I have got a form which does not bind to properties of my object when i use <q-input>.
The entered data in the input textfield gets removed when you tabbed to the next input field. The value is copied to the objects field. When saving it to my api the value is send, but the use thinks it will get lost when the focus blurs from the input field.

Any idea’s what goes wrong?

When I replace the <q-input> for a <input> it works as expected.

here is my template source:

<template>
  <q-card>
    <q-card-section class="row">
      <div class="text-h6">Add User</div>
      <q-space />
      <q-btn v-close-popup flat round dense icon="close" />
    </q-card-section>

    <form @submit.prevent="submitForm">
      <q-card-section class="q-gutter-sm">
        <q-input outlined v-model="user.name" label="Name"/>
        <q-input outlined v-model="user.email" label="E-mail"/>
      </q-card-section>

      <q-card-actions align="right">
        <q-btn label="Save" color="primary" type="submit" />
      </q-card-actions>
    </form>
  </q-card>
</template>

<script>
var Api = require('components/javascript-api2/src/index')

export default {
  data () {
    return {
      user: new Api.User()
    }
  },
  mounted () {
    this.user.name = 'test'
    this.user.email = 'email@test'
  },
  methods: {
    submitForm () {
      new Api.UserApi().createUser(this.user, (error, data, response) => {
        if (error) {
          this.$q.notify({ message: error, color: 'red' })
        } else {
          this.$q.notify({ message: data })
        }
      })
    }
  }
}
</script>

and my User class:

/**
 * User API
 * Demo API with 5 operations
 *
 * The version of the OpenAPI document: 1.0
 * 
 *
 * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
 * https://openapi-generator.tech
 * Do not edit the class manually.
 *
 */

import ApiClient from '../ApiClient';

/**
 * The User model module.
 * @module model/User
 * @version 1.0
 */
class User {
    /**
     * Constructs a new <code>User</code>.
     * @alias module:model/User
     */
    constructor() { 
        
        User.initialize(this);
    }

    /**
     * Initializes the fields of this object.
     * This method is used by the constructors of any subclasses, in order to implement multiple inheritance (mix-ins).
     * Only for internal use.
     */
    static initialize(obj) { 
    }

    /**
     * Constructs a <code>User</code> from a plain JavaScript object, optionally creating a new instance.
     * Copies all relevant properties from <code>data</code> to <code>obj</code> if supplied or a new instance if not.
     * @param {Object} data The plain JavaScript object bearing properties of interest.
     * @param {module:model/User} obj Optional instance to populate.
     * @return {module:model/User} The populated <code>User</code> instance.
     */
    static constructFromObject(data, obj) {
        if (data) {
            obj = obj || new User();

            if (data.hasOwnProperty('id')) {
                obj['id'] = ApiClient.convertToType(data['id'], 'Number');
            }
            if (data.hasOwnProperty('name')) {
                obj['name'] = ApiClient.convertToType(data['name'], 'String');
            }
            if (data.hasOwnProperty('email')) {
                obj['email'] = ApiClient.convertToType(data['email'], 'String');
            }
        }
        return obj;
    }


}

/**
 * @member {Number} id
 */
User.prototype['id'] = undefined;

/**
 * @member {String} name
 */
User.prototype['name'] = undefined;

/**
 * @member {String} email
 */
User.prototype['email'] = undefined;


export default User;

[hpawar]

Any luck with this? Were you able to solve this?