Form Compenents not maintaining visible values when linked to an object without intialized keys

[dgk]

I’ve put together a form with various form components with each form component “linked” via v-model to a particular key of a common object. When those keys for that object (device) are loaded from the server upon initial render it all works as it should. But when I create a new device for which the keys neither created nor initialized then the form still works but as you enter data and then tab to the next form component that updated information is cleared (hmmm). It’s actually still “there” because if one clicks on the “save changes” button all those keys/fields get sent to the server correctly and if one refreshes (re-renders from mount()) then the field values (key values) are all there as they were entered and then edit correctly as they should.

Not sure if

1. This is a quasar bug?
2. A Vue bug?
3. Or it is required that all keys of an object that are v-model bound must already exist even though they are clearly set in the form and accessible from the javascript even if they “disappear” when moving from field to field.

Little help/clarification please. I guess you’ll have to set up a little “test” to see the behavior I am seeing.

<template>
    <div>
      {{ device }}
        <q-field label="Device Name">
          <q-input  v-model="device.name"/>
        </q-field>
       <q-field label="Type">
            <q-select v-model="device.type" :options="deviceTypes" />
        </q-field>
        <q-field label="Description">
          <q-input  v-model="device.desc"/>
        </q-field>
        <q-field label="I2C Address">
          <q-input  v-model="device.address"/>
        </q-field>
        <q-field label="Interrupt A pin number">
          <q-input  v-model="device.ipinA"/>
        </q-field>
        <q-field label="Interrupt B pin number">
          <q-input  v-model="device.ipinB"/>
        </q-field>
    <q-btn color="positive" :disabled="updated" @click="updateDevice()">Save Changes</q-btn>
    </div>
</template>

<script>

import api from 'src/api'
const hardware = api.service('hardware')

export default {
  data () {
    return {
      device: this.pDevice,
      updated: false,
      deviceTypes: []
    }
  },
  props: ['pDevice'],
  computed: {
  },
  methods: {
    updateDevice () {
      hardware.update(this.device._id, this.device)
      hardware.get(this.device._id).then(data => console.log('device as saved', data))
    }
  },
  watch: {
  },
  components: {
  },
  mounted () {
    // load device types into select options
    hardware.find({
      paginate: false,
      query: { doctype: 'type' }
    })
      .then((types) => {
        console.log(`loaded types: ${types.data[0].name}`)
        for (let type of types.data) {
          this.deviceTypes.push({ label: type.name, value: type.name })
        }
      })
      .catch((err) => {
        console.log('find error', err)
      })

[a47ae]

It seems like your problem comes from Vue.js reactivity model. Read about it in the Vue.js docs.
If keys are added later or not initialized, Vue can not keep track of them.