If anyone is interested this is how i solved it… Also i’m new to Vue.js and Quasar so please give input if there are ways to improve this.

I created a component that houses the mobile view where i copied the Quasar design except for my buttons (v-else)

<template v-slot:item="props">
  <div
    class="q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-3 grid-style-transition"
    :style="props.selected ? 'transform: scale(0.95);' : ''"
  >
    <q-card :class="props.selected ? 'bg-grey-2' : ''">
      <q-card-section>
        <q-checkbox dense v-model="props.selected" :label="props.row.name" />
      </q-card-section>
      <q-separator />
      <q-list dense>
        <q-item
          v-for="col in props.cols.filter(col => col.name !== 'desc')"
          :key="col.name"
        >
          <div class="q-table__grid-item-row">
            <div class="q-table__grid-item-title">{{ col.label }}</div>
            <div class="q-table__grid-item-value" v-if="col.label != 'edit'">
              {{ col.value }}
            </div>
            <div v-else>
              <alert-edit-delete :alertId="props.row.id" @handleDelete="handleDelete" />
            </div>
          </div>
        </q-item>
      </q-list>
    </q-card>
  </div>
</template>

<script>
export default {
  props: ["props"],

    components: {
    "alert-edit-delete": require("components/alert/AlertEditDelete.vue").default
  },

  methods: {
    handleDelete(id) {
      this.$emit('handleDelete',id);
    },
  }
};
</script>

The buttons are also a component

<template>
  <div class="order-first">
    <q-btn
      @click.stop=""
      flat
      round
      dense
      color="primary"
      icon="edit"
      class="q-mr-sm"
    />
    <q-btn
      @click.stop="handleDelete(alertId)"
      flat
      round
      dense
      color="red"
      icon="delete"
    />
  </div>
</template>

<script>

export default {
props: ["alertId"],
  methods: {
    handleDelete(id) {
      this.$emit('handleDelete',id);
    },
  }
};
</script>

In the table component I import the mobile list

<template v-slot:item="props">
        <mobile-alert-list :props="props" @handleDelete="promptToDelete" />
</template>

fyi if it helps anyone. So going off what s.molinari was saying, this is an easy fix. I’m grabbing the items from the state in my table component’s child component and filtering by id of selected.

computed:{
  ...mapGetters('foobar',['getFoobars']),

  updatedSelected(){
    const ids = this.selected.map(a => a.id);
    return this.getFoobars.filter(a => ids.includes(a.id) )
  }
}

figured it out and in hindsight very simple. I copied this from a tutorial on Quasar but i’m intercepting each router request in a boot file and allowing or disallowing based on whether or not user is authenticated… though i’m using JWT from a Spring Boot backend. Anyway, I also wanted to set ‘loggedIn’ in the auth store since other components need to know if the user is logged in.

boot/router-auth.js

import { LocalStorage } from "quasar";
import { AUTH } from "../constants";

export default ({ router, store }) => {
  router.beforeEach((to, from, next) => {
    let loggedIn = !tokenExpired();
    store.commit("auth/setLoggedIn", loggedIn);

    if (checkAccess(loggedIn, to)) {
      next("/auth/login");
    } else {
      next();
    }
  });
};

const tokenExpired = () => {
  const token = localStorage.getItem(AUTH.TOKEN);
  const expiration = LocalStorage.getItem(AUTH.TOKEN_EXPIRE);
  return new Date() >= expiration || token == null;
};

const checkAccess = (loggedIn, to) => {
  return (
    !loggedIn &&
    ![
      "",
      "/",
      "/auth/login",
      "/auth/register",
      "/password/reset",
      "/password/reset/new"
    ].includes(to.path)
  );
};

So works great but what do you think of this strategy? Better way to do it?

That was actually a silly mistake. In the action, i don’t call the api if profile is defined in the store already. The solution was to call the action in mount of the profile component. And in one-signal.js commit to null out the profile.

store.commit("user/setProfile", null)

This is not really a Quasar issue but i implemented IOS notifications using Quasar, Cordova and the OneSignal SDK. the notifications work great but I can’t seem to be able to call a store action from the oneSignal config file after a user clicks on a notification. What i’m trying to do is grab a fresh copy of a user’s profile via an api call when a user clicks a notification and then navigate to the profile page.

This is my OneSignal config file located in src/boot/one-signal.js directory

export default async ({ app, router, store ,Vue }) => {
  app.$oneSignal = Vue.prototype.$oneSignal = {
    get instance () {
      return window.plugins && window.plugins.OneSignal
    },

    setup (appId, {initCallback} = {}) {
      if (!appId) {
        throw new Error('boot/one-signal: app id is required')
      }

      document.addEventListener('deviceready', function () {

        window.plugins.OneSignal.setLogLevel({ logLevel: 6, visualLevel: 0 });

        window.plugins.OneSignal.startInit(appId)

        if (initCallback) {
          initCallback(window.plugins.OneSignal)
        }

        window.plugins.OneSignal.handleNotificationOpened(function(openResult) {

          store.dispatch("user/loadProfile").then((res) => {
            router.push({ name: "profile" }).catch(() => {}); 
          })
     
        })

        window.plugins.OneSignal.endInit()
      }, false)
    },

    optIn (externalUserId) {
      window.plugins.OneSignal.setExternalUserId(externalUserId)
    },

    optOut () {
      window.plugins.OneSignal.removeExternalUserId()
    }
  }
}

The redirect works, but the loadProfile action is not called and ‘res’ is undefined. I know i could reload in ‘mount’ but most times i don’t want grab a fresh copy. What am i missing here in the way i’m handling it?

figured it out and in hindsight very simple. I copied this from a tutorial on Quasar but i’m intercepting each router request in a boot file and allowing or disallowing based on whether or not user is authenticated… though i’m using JWT from a Spring Boot backend. Anyway, I also wanted to set ‘loggedIn’ in the auth store since other components need to know if the user is logged in.

boot/router-auth.js

import { LocalStorage } from "quasar";
import { AUTH } from "../constants";

export default ({ router, store }) => {
  router.beforeEach((to, from, next) => {
    let loggedIn = !tokenExpired();
    store.commit("auth/setLoggedIn", loggedIn);

    if (checkAccess(loggedIn, to)) {
      next("/auth/login");
    } else {
      next();
    }
  });
};

const tokenExpired = () => {
  const token = localStorage.getItem(AUTH.TOKEN);
  const expiration = LocalStorage.getItem(AUTH.TOKEN_EXPIRE);
  return new Date() >= expiration || token == null;
};

const checkAccess = (loggedIn, to) => {
  return (
    !loggedIn &&
    ![
      "",
      "/",
      "/auth/login",
      "/auth/register",
      "/password/reset",
      "/password/reset/new"
    ].includes(to.path)
  );
};

So works great but what do you think of this strategy? Better way to do it?

any other ideas?

Thanks Scott but sadly didn’t work. getting a long list of error about not mutating state outside of mutations though the action i called just did a console.log

I didn’t change it from what is there cept i’m importing different modules
for example:

import auth from './modules/store-auth';

and adding them to the Vuex.Store instance. Otherwise no change.

So it does work perfectly in .vue files. Just can’t seem to figure it out in .js files

Hello all, assuming i didn’t deviate from the quasar default architecture at all, how do i call a mutation from inside a js file?

I would think simply import the store

import store from '../store'

store.dispatch('auth/setLoggedIn', false)

but i’m getting

_store_index__WEBPACK_IMPORTED_MODULE_2__.default.dispatch is not a function

fyi if it helps anyone. So going off what s.molinari was saying, this is an easy fix. I’m grabbing the items from the state in my table component’s child component and filtering by id of selected.

computed:{
  ...mapGetters('foobar',['getFoobars']),

  updatedSelected(){
    const ids = this.selected.map(a => a.id);
    return this.getFoobars.filter(a => ids.includes(a.id) )
  }
}

Yeah that makes sense. Thanks.

The table rows and data update just fine but the selected rows array doesn’t. Anyone run into this or am i doing something wrong. I realize I have no code to show but was wondering if I could get some quicks thoughts first…