No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    1. Home
    2. rab
    3. Posts
    R
    • Profile
    • Following 0
    • Followers 0
    • Topics 7
    • Posts 42
    • Best 6
    • Groups 0

    Posts made by rab

    • Twitter cards support

      Any support for twitter cards?

      I am new to Twitter Cards. Afaik you add meta statements in your html. Beyond that I’m a blank canvas.

      Ideally there is a solution where you get a screenshot posted based on the uri (i.e. different images for different pages).

      • Is there any support for Twitter Cards in Quasar?
      • Does it even make sense to ask the question?
      • Can anyone share a solution?

      Thanks

      posted in Help
      R
      rab
    • RE: Global Bus v Page Bus ?

      @rab

      A Problem

      • Vue 3 instances no longer implement the event emitter interface.
      • Recommendation is to use mitt.
      • See: https://github.com/vuejs/rfcs/blob/master/active-rfcs/0020-events-api-change.md

      A Solution

      • Load the code below as a boot file (e.g. pagebus.js).
      • Using this.$on is detected as error so am using $$on instead.
      // file boot/pagebus.js
      import { boot } from 'quasar/wrappers'
      import mitt from 'mitt'
      
      export default boot(({ app }) => {
        app.use({
          install: function (Vue, options) {
            const pagebus = mitt()
            app.config.globalProperties.$$on = pagebus.on
            app.config.globalProperties.$$emit = pagebus.emit
          }
        })
      })
      

      If you wish to debug:

         ...
         app.config.globalProperties.$$on = function (ev, ...args) {
            console.log(ev, args)
            return pagebus.on(ev, ...args)
         }
         ...
      
      posted in Framework
      R
      rab
    • Tip : Navigation links to External Urls

      Navigation drawers often contain a mix of internal and external links.

      The following is working well for me:

      // generate nav links as a list of q-items
      <q-list>
        <q-item
          v-for="(item,id) in items" :key="id"
          exact
          tag="a"
          :to="item.to"
          :href="item.href"
          :target="item.target||'_'">
          <q-item-section>
            <q-item-label>
              {{ item.label }}
            </q-item-label>
          </q-item-section>
        </q-item>
      </q-list>
      

      You then provide data where items have either a to or an href:

      // the data
        data () {
          return {
            items: [
              { label: 'One',     to:   '/one'            },
              { label: 'Two',     to:   '/two'            },
              { label: 'Bing',    href: 'http://bing.com' }
            ]
        }}
      

      Please shout if this breaks something I should be aware or if there is an alternative recommended way.

      Hope it helps.

      posted in Useful Tips (NEW)
      R
      rab
    • RE: Quasar editor

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

      posted in Framework
      R
      rab
    • RE: Upload image

      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.

      posted in Framework
      R
      rab
    • RE: re-request the server after data change

      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.

      posted in Framework
      R
      rab
    • RE: re-request the server after data change

      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.

      posted in Framework
      R
      rab
    • RE: qtable summary footer

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

      posted in Framework
      R
      rab
    • RE: qtable summary footer

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

      posted in Framework
      R
      rab
    • RE: qtable summary footer

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

      posted in Framework
      R
      rab
    • RE: qtable summary footer

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

      posted in Framework
      R
      rab
    • RE: How to add a q-toggle to the bottom of a q-table ?

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

      posted in Framework
      R
      rab
    • RE: How to add a q-toggle to the bottom of a q-table ?

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

      posted in Framework
      R
      rab
    • RE: Global Bus v Page Bus ?

      @rab

      Keeping this here for posterity but no longer works in Vue 3.

      A solution that does work in Vue 3 is given in subsequent post (see reply below dated March 9th 2021).

      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)
              }
            }
          })
        }
      }
      
      posted in Framework
      R
      rab
    • RE: How to add a q-toggle to the bottom of a q-table ?

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

      posted in Framework
      R
      rab
    • Global Bus v Page Bus ?

      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?

      posted in Framework
      R
      rab
    • RE: How to add a q-toggle to the bottom of a q-table ?

      Anyone know how to tackle this?

      posted in Framework
      R
      rab
    • RE: [SOLVED] How to use images from the assets folder inside the script tags of .vue files?

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

      posted in Help
      R
      rab
    • RE: [SOLVED] How to use images from the assets folder inside the script tags of .vue files?

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

      posted in Help
      R
      rab
    • RE: How can I populate my data from an array in another method?

      @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

      posted in Help
      R
      rab