Posts made by rab

@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')
  }
}

2. 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.

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

4. 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

Use quasar boot file:
https://quasar.dev/quasar-cli/cli-documentation/boot-files

Example in this post:
https://forum.quasar-framework.org/topic/5224/integrating-thrid-party-component

@guogangj

Suggestions:

1. Try q-input dense attribute.
2. Try q-input input-style attribute.
3. Inject css in style section of vue file.

@ebena

Use q-table with :data=“userData” and define userData as a computed property:

computed: {
    userData: function () {
      return Object.entries(this.user).map(([k,v]) => { return {key: k, value: v} })
    }
  }

@rulrok

Am interested in this as will be hitting same challenge down the line.

Some thoughts:

1. You may like to consider SSR + PWA handoff.
   https://quasar.dev/quasar-cli/developing-ssr/ssr-with-pwa

2. SSR shopfront knows subdomain through ssrContext
   https://quasar.dev/quasar-cli/developing-ssr/configuring-ssr#Boot-Files

3. PWA shopfront knows subdomain through window.location

4. Code knows whether it is running client or server via process.env.CLIENT and process.env.SERVER