Ok, I gave up trying to make it work on quasar v0.13.10 as the template that I’m using is being deprecated… On quasar v0.14.1 I was able to make it work without any problem.

Anyway thanks for those who tried to help.

I have a DataTable that loads some data from IndexedDB when I go to its route. My problem is that every time I enter the route the noData message from the DataTable is displayed(pretty damn fast). So I’ve tried to do this:

<q-data-table
       :data="weightList"
       :config="config"
       :columns="columns"
>

      <template @click="t" slot="col-weight" scope="cell">
        <span class="light-paragraph">{{ cell.data }}</span>
      </template>

      <template slot="col-weighingDate" scope="cell">
         <span class="light-paragraph">{{ formatDate(cell.data) }}</span>
      </template>
 
      <template slot="selection" scope="selection">
         <q-btn flat invert @click="remove(selection)">
           <q-icon name="delete" />
         </q-btn>
       </template>
  
       <q-inner-loading :visible="isLoading">
          <q-spinner size="50px" color="primary" />
       </q-inner-loading>
 </q-data-table>

I have isLoading = true on the date () and I set it to false after the data is fetched from the indexedDB.

So the <q-inner-loading> doesn’t appear when inside the DataTable component but it DOES outside.

Does anyone knows if it suppose no to work on this specific component?

Best regards,
Bruno

That works fine thanks a bunch!

Every time I add a new rep input the modal is resized. How can I prevent that from happening?

<q-modal minimized v-model="opened">
  ¦ ¦ <div class='q-pa-lg'>
  ¦ ¦ ¦ <q-input stack-label="Exercise" color="dark" v-model="terms" placeholder="Choose an exercise">
  ¦ ¦ ¦ ¦ <q-autocomplete
  ¦ ¦ ¦ ¦ ¦ @search="search"
  ¦ ¦ ¦ ¦ ¦ @selected="selected"
  ¦ ¦ ¦ ¦ />
  ¦ ¦ ¦ </q-input>

  ¦ ¦ ¦ <q-input color="dark" type="number" v-model="obj.sets" />

  ¦ ¦ ¦ <div class="row">
  ¦ ¦ ¦ ¦ <div class="col-4" v-for="index in obj.sets">
  ¦ ¦ ¦ ¦ ¦ <q-input class="q-ml-sm" stack-label="rep" color="dark" type="number" v-model="obj.reps" />
  ¦ ¦ ¦ ¦ </div>
  ¦ ¦ ¦ </div>

  ¦ ¦ ¦ <q-datetime stack-label="Day" color="dark" v-model="obj.exercise_done_date" type="date" />

  ¦ ¦ ¦ <q-datetime stack-label="Duration" color="dark" v-model="obj.duration" type="time" />

  ¦ ¦ ¦ <br />

  ¦ ¦ ¦ <div class="row justify-between">
  ¦ ¦ ¦ ¦ <q-btn
  ¦ ¦ ¦ ¦ ¦ :disabled="!isEdit"
  ¦ ¦ ¦ ¦ ¦ color="negative"
  ¦ ¦ ¦ ¦ ¦ @click="remove"
  ¦ ¦ ¦ ¦ ¦ label="Delete"
  ¦ ¦ ¦ ¦ />

  ¦ ¦ ¦ ¦ <q-btn
  ¦ ¦ ¦ ¦ ¦ color="positive"
  ¦ ¦ ¦ ¦ ¦ @click="confirm"
  ¦ ¦ ¦ ¦ ¦ label="Confirm"
  ¦ ¦ ¦ ¦ />
  ¦ ¦ ¦ </div>
  ¦ ¦ </div>
  ¦ </q-modal>

The first image shows the “default” size of the modal and the second what happens when I add another input.

I have a DataTable that loads some data from IndexedDB when I go to its route. My problem is that every time I enter the route the noData message from the DataTable is displayed(pretty damn fast). So I’ve tried to do this:

<q-data-table
       :data="weightList"
       :config="config"
       :columns="columns"
>

      <template @click="t" slot="col-weight" scope="cell">
        <span class="light-paragraph">{{ cell.data }}</span>
      </template>

      <template slot="col-weighingDate" scope="cell">
         <span class="light-paragraph">{{ formatDate(cell.data) }}</span>
      </template>
 
      <template slot="selection" scope="selection">
         <q-btn flat invert @click="remove(selection)">
           <q-icon name="delete" />
         </q-btn>
       </template>
  
       <q-inner-loading :visible="isLoading">
          <q-spinner size="50px" color="primary" />
       </q-inner-loading>
 </q-data-table>

I have isLoading = true on the date () and I set it to false after the data is fetched from the indexedDB.

So the <q-inner-loading> doesn’t appear when inside the DataTable component but it DOES outside.

Does anyone knows if it suppose no to work on this specific component?

Best regards,
Bruno

@a47ae

Damn, my bad. Didn’t pay attention on the doc’s version. But anyway thanks for the help.

Ok, I gave up trying to make it work on quasar v0.13.10 as the template that I’m using is being deprecated… On quasar v0.14.1 I was able to make it work without any problem.

Anyway thanks for those who tried to help.

Hi @krsyoung , thanks for your reply

A console.log on the first line of the code doesn’t do anything as the function is not being triggered. HOWEVER, if I write the component like you did trigger it, but I do get another error refering to the <QListItem>(maybe the data I pass through the done() is wrong?) component, like this:

[Vue warn]: Invalid prop: type check failed for prop "item". Expected Object, got String.

found in

---> <QListItem>
       <QPopover>
         <QAutocomplete>
           <Index> at /home.../src/components/index.vue
             <App> at /home/.../src/App.vue
               <Root>

By the way I’m using the version 0.13.10 in this project

Hi, @a47ae, thanks for your reply!

I do not see a request on the browser’s network tab BUT outside the search () {} function if I make the request I can console.log and what shows me on the console is this:

Object { data: Array[2], status: 200, statusText: "OK", headers: Object, config: Object, request: XMLHttpRequest }

so I think axios support requests for static json files…

Anyhow thanks for your reply!

Hi,

I really don’t know what I’m missing here… My problem is that the search method is not being triggered when I type something.

I’ve read the docs(http://quasar-framework.org/components/autocomplete.html#Using-Asynchronous-Method-Ajax-call)

and this is my code:

<q-search v-model="terms" placeholder="Start typing a country name">
    <q-autocomplete @search="search" @selected="selected" />
</q-search>

import axios from 'axios'

export default {
  data () {
    return {
      terms: ''
    }
  },
  methods: {
    search (terms, done) {
      axios.get('/statics/users.json')
        .then((results) => {
          console.log(results)
          done(results.data.users)
        })
    },
    selected () {}
  }

Is that not right?(I basically copy the samples from docs and added the request…in which is working coz I’ve tested just above the export default)
Ah, the users.json is just an array with some names like:

[
    "Jane Doe",
    "John Doe"
]

Regards,
Bruno