Posts made by rab

You can add site-wide styles in css/app file.
Perhaps this helps you.

Not a great comment mecjos. I am just a regular user of Quasar. Have found the support in this forum to be excellent. Much like the Quasar framework itself.

The emit solution does not reload the page

Yes this is what I expected. My comment was not clear.

I assume the getData methods act on the new data (or the context is somehow different as otherwise would not need to be called again).

If it is working for you then the solution seems ok to me.

Perhaps you already know Vue persists data across page refreshes. It’s not clear you need it here.

I would store the data fetched within startEverything into a data variable (say myData) and call an updateMyData method when the new data is entered.

Depending on your UI the updateMyData could be triggered by a button (see @click)

You do not need to refresh / reload page to re-trigger the data fetch from the server.

@amoss PageSticky can be used to create a bottom fixed element. I don’t know how you would align elements in that with q-table columns. Perhaps if you take explicit css control of column widths you could make it work.

@amoss Suggestion is to add an extra item to the end of your data array to represent the count and total values. That item will appear in the correct columns as part of standard q-table rendering. If not a solution then please post your relevant code.

@amoss Calculate count and total in data before passing to q-table.

@amoss What are you trying to do? q-table comes with pagination footer that shows total number of items. If you want to use the total count then perhaps passing in pagination prop with .synch could work for you.

@metalsadman Thank you for the suggestion. I appreciate it.

@dmitry-polushkin Thanks. In my use case the state is sticky and users are assumed to toggle infrequently so bottom seemed ok to me, but you may well still be right even for my case.

@rab

For anyone interested this works as a plugin solution. Please shout if you have a better approach or can contribute to improving this one; e.g.:

1. Locating the page root is an educated guess and may not fit all cases.
2. Desirable to use this.$page.$emit rather than this.$$emit.
3. A better solution using Vue extends may exist.

/* pagebus.js

Using the global event bus to decouple components in a PWA works great
until there are multiple copies of a page instance in the browsing history;
each instance continues to receive and respond to events - especially
troublesome when one of the components fetches data from the server
(the data is fetched multiple times).

An interim workaround is provided here by propagating events and listeners 
to the 'page' root not the 'app' root.

TO DO:

  1. Locating the page root is an educated guess and may not fit all cases.
  2. Desirable to use this.$page.$emit rather than this.$$emit.
  3. A better solution using Vue extends may exist.

*/

import Vue from 'vue'

const DEBUG = true

export default {
  install (Vue, options) {
    Vue.mixin({
      methods: {
        $$page: function () {
          // find the page root (educated guess)
          let x = this;
          do {
            x = x.$parent;
          } while (x && x.$parent && x.$parent.$parent !== x.$root);
          return x
        },
        $$on: function (ev, ...args) {
          // propagate to page root component
          DEBUG && console.log('-> pagebus: on', this._uid, ev, args)
          return (this.$$page() || this).$on(ev, ...args)
        },
        $$emit: function (ev, ...args) {
          // propagate to page root component
          DEBUG && console.log('-> pagebus: emit', this._uid, ev, args)
          return (this.$$page() || this).$emit(ev, ...args)
        }
      }
    })
  }
}

@jadedRepublic Thank you. Although it seems bottom-row slot not present in grid mode.

I’ve been using the global event bus to create decoupled components for a PWA.

It works great until there are multiple instances of a page in the browsing history - each instance continues to receive and process events.

Options

1. Ignore it - just make sure event handlers are lightweight and idempotent.

2. Introduce scope into the global bus (e.g. override $emit and $listen to prefix events with id of root component).

3. Create a “page-bus” for each instance.

4. Do something else.

Any else had experience of this?

Anyone know how to tackle this?

@NILA

Suggestion was to put image file in same folder as vue file just to check whether require working or not. After testing put assets where you like.

I think the “Getting Asset Paths in JavaScript” is giving you Webpack asset management for folders you specify.

@NILA

I tried the examples on the docs page you linked to.

1. Require worked in my script tag as per the documentation. It failed first time as my relative path was not right. Try creatingimage-1.jpg in same folder as your .vue file and doing:

computed: {
  n () {
    return 1
  },
  background () {
    return require('./' + this.n + '.jpg')
  }
}

1. Your use case may best suit the statics folder option:

Please note that whenever you bind “src” to a variable in your Vue scope, it must be one from the statics folder.

@felice You need to digest the info @chyde90 recommended:

https://medium.com/free-code-camp/learn-es6-the-dope-way-part-ii-arrow-functions-and-the-this-keyword-381ac7a32881#.59q9th108

@NILA

Not an expert in Assets v Statics but maybe this helps:

1. Try without prefetchjs to check require works in your scripts.

2. https://quasar.dev/quasar-cli/cli-documentation/handling-assets

Files in the “assets” folder are only included in your build if they have a literal reference in one of your Vue files. Every file and folder from the “statics” folder are copied into your production build as-is, no matter what.

1. Do you need a ‘~’ at the start of the image reference ?

2. Check if there is a .jpg v .jpeg mistake

I would like to add a q-toggle to the footer of a q-table whilst retaining the default pagination component.

I can easily add a toggle to the top of a q-table using top-left slot, but really I would like it positioned at the bottom.

The toggle will control table v grid mode.

Does anyone know how to do this?

@rixybix

Sounds like you are almost there with your current method.
Maybe this helps:

Thus with htmlWebpackPlugin :
<%= Outputs the unescaped value into the template
<%- Outputs the escaped value into the template

https://stackoverflow.com/questions/57262244/output-raw-html-in-ejs-templates-with-htmlwebpackplugin