Thanks for the suggestions. I did end up just making reset actions/mutations for each store module. Seems to work.

I’d like to reset my store when a user logs out. No data should be saved from one session to another.

The following post speaks somewhat to what I’m trying to do, but I think vuex is organized a bit differently in Quasar, so I’m not sure how to apply it. (https://github.com/vuejs/vuex/issues/1118)

In the file tree shown here: https://quasar-framework.org/guide/app-vuex-store.html, can I just add action and mutation files to the same level as index.js?

Or are you guys resetting your application some other way, particularly at logout?

Also, what does “if we want some HMR magic for it” mean?

Thanks - Ryan

Hello all,

As the subject states, @change isn’t working. @input is, but it triggers for each element of the datetime that is changed. I need to use the event to grab a potentially large amount of data and certainly don’t want to launch that process 5 or 6 times for one date change. I just want to do it once.

Has anyone gotten it to work? I don’t think there should be any changes between an @input version and @change, right? Shouldn’t I just be able to swap our the event name and be good to go?

The Loading plugin is used differently than most Quasar components. It’s just called and dismissed via JavaScript code and doesn’t exist in the HTML section.

I’m wondering how I can add a progress bar to it. I like the modal nature of the Loading plugin and the ease of use. Can I use it together with a Progress Bar, or do I need to build my own mash-up using a Modal + Spinner + Progress Bar?

Once again, solving my own issue…

I updated to 0.17.22/0.17.18 and the delete Xs are now there.

@kayex I can confirm the need to set open: false

I ended up having to use my own chip rather than the one built into the count property. Some CSS was required to get it into the right position.

For anyone interested, I managed to get this to work.

First, from my VUE file, which is a Quasar layout file:

<div
          id="clockdiv"
          v-show="isAuthenticated"
        >
          <q-tooltip>
            Due to HIPPA concerns, if you're inactive on this website, you'll be logged out when time expires.
          </q-tooltip>
          <div
            id="timerTitle"
            class="smalltext"
          >
            Auto
            <br>
            logout
          </div>
          <div>
            <span
              id="minutes"
              class="minutes"
            />
            <div class="smalltext">Min</div>
          </div>
          <div>
            <span
              id="seconds"
              class="seconds"
            />
            <div class="smalltext">Sec</div>
          </div>
        </div>

mounted () {
    this.listener = (event) => {
      // console.log('document event triggered')
      this.initializeClock('clockdiv', new Date(Date.parse(new Date()) + 20 * 60 * 1000))
    }
    document.addEventListener('mousedown', this.listener)
    document.addEventListener('keydown', this.listener)
    document.addEventListener('touchstart', this.listener)
  }

And my plugin file (idle-vue.js):

import Vue from 'vue'
import IdleVue from 'idle-vue'
import store from '../store'

const eventsHub = new Vue()

export default ({ Vue }) => {
  const options = {
    eventEmitter: eventsHub,
    idleTime: 1200000, // 20 minutes
    store: store,
    startAtIdle: false,
    events: ['keydown', 'mousedown', 'touchstart']
  }
  Vue.use(IdleVue, options)
}

I’m using 0.17.15/0.17.12. Like the subject says, I have a q-select inside of a field (same if not in a field) which has chips activated. The chips show up, but they don’t have individual X buttons to remove them. One must popup the select with the checkboxes instead and uncheck items. Adding/removing ‘clearable’ makes no difference. Here is my code:

<q-field
          v-show="singleMultiPat === 'multiple'"
          id="report-department-selection"
          helper="No selection = all"
          label="Nursing Areas"
          orientation="vertical"
          count
        >
          <q-select
            v-model="nursingAreasPlus"
            multiple
            chips
            clearable
            separator
            :options="departmentOptions"
          />
        </q-field>

Any ideas? I’m not getting any errors, of course.

Thanks for that. I’m giving it a try right now. I’m a bit confused on using Vuex with it though. As you know, Quasar does its own thing with Vuex, and stores, and I’m unclear how to slot this in. If you’ve done this already, I’d appreciate a hint. Otherwise, I’ll just give a few things a try. That said, it seems like it’s optional, so why would I need it for this?