q-input populate from database, or get as input if db empty

[cynderkromi]

I have a little application to take dog show entries. I’m saving the person and dog information to IndexedDB (Dexie). When the page reloads, or the person returns to the page, I’d like the person’s information to show in the person’s fields if there is a value in the database.

If there is no database yet (the person hasn’t been to the page before, or cleared it), then I would like them to be blank and take new entries to save into the database.

Does anyone have an example of this? I’m not even sure how to phrase this for a search since my question is kinda long, but I’m sure it’s a commonly done thing. Thanks!

[Ilia]

@cynderkromi You would need something like this in your component. Would be a good starting point:

<template>
  <q-list>
    <q-item>
      <q-item-section>
        <q-input
          v-model="newEntryName"
          @keyup.enter="save"
        />
      </q-item-section>
      <q-item-section side>
        <q-btn icon="save" @click="save" />
      </q-item-section>
    </q-item>
    <q-item v-for="e in entries" :key="e.time">
      <q-item-section>
        <q-item-label>{{e.name}}</q-item-label>
        <q-item-label caption>{{e.descr}}</q-item-label>
      </q-item-section>
    </q-item>
    <q-inner-loading :showing="loading">
      <q-spinner-tail />
    </q-inner-loading>
  </q-list>
</template>
<script>
import Dexie from 'dexie'
import { uid } from 'quasar'

const db = new Dexie('dog_show_db')

db.version(1).stores({
  entries: '&id, name, descr, time'
})

export default {
  data () {
    return {
      newEntryName: '',
      entries: [],
      loading: false
    }
  },
  methods: {
    save () {
      const entry = {
        id: uid(),
        name: this.newEntryName,
        descr: 'Some description',
        time: Date.now()
      }

      db.entries.put(entry)
      this.entries.unshift(entry)

      this.newEntryName = ''
    },
    load () {
      this.loading = true

      db.entries
        .orderBy('time')
        .reverse()
        .toArray()
        .then((entries) => {
          this.entries = entries
          this.loading = false
        })
    }
  },
  mounted () {
    this.load()
  }
}
</script>

[cynderkromi]

@ilia Thanks, I will look into that.