In the docs, the following example for <q-context-menu> is provided:

    <div ref="target" style="height: 100px; width: 100px; background-color: purple">
      <q-context-menu ref="context">
        <q-list link separator style="min-width: 150px; max-height: 300px;">
          <q-item @click="showToast(), $refs.context.close()">
            <q-item-main label="Label" sublabel="Value"></q-item-main>
          </q-item>
          <q-item @click="showOtherToast(), $refs.context.close()">
            <q-item-main label="Other Label" sublabel="Other Value"></q-item-main>
          </q-item>
        </q-list>
      </q-context-menu>
    </div>

However, I cannot figure out how to open the context menu.

EDIT: I got it!! I had to wrap the q-context-menu in a div with ref=“target”. Then right clicking on the div opens the context menu. I changed the code above to reflect the solution.

I’m trying to replicate the Autocomplete (countries) example from the docs, however, I cannot find the file referenced in the script:

import countries from 'data/autocomplete.json'

Is this coming from a node module? Any idea which one?

Thanks

EDIT:

I got this to work with the following NPM package: country-json

I had to make some minor changes to the code:

import countries from 'country-json/src/countries-by-name.json'

and...

  function parseCountries () {
    return countries.map(item => {
      let countryName = item.country
      return {
        label: countryName,
        sublabel: getRandomSecondLabel(),
        icon: getRandomIcon(),
        stamp: getRandomStamp(),
        value: countryName
      }
    })
  }

@benoitranque

Thanks so much…I can’t believe I didn’t see that

Is there a recommended way to stagger QTransition Group Animations with Animate.css?

I’ve tried many different ways, including binding the enter and leave attributes to methods, and then running a setTimeout, but this didn’t work.

I’ve also tried using a regular Vuejs transition-group and staggering according to the Vuejs docs, but I end up with empty spaces in the dom between the list items.

Any suggestions or recommendations on how to achieve this?

Following is a stripped version of my current list component:

      <q-list no-border>
        <q-list-header>All Items:</q-list-header>
        <q-transition group appear enter="fadeIn"
        leave="bounceOutLeft">
          <q-item v-for="(item, index) in computedItems" :key="index">
                 // list item content
          </q-item>
        </q-transition>
      </q-list>

Thanks so much

Okay…figured it out.
Just link to index.html in dist folder.
Much easier than I thought it would be

Thanks for your reply.
Yes, quasar dev works fine.
With firebase do you just serve the dist folder after building?
Thanks for the suggestion.

I’ve built a Quasar project / application (v0.14) and I would like to add it to my portfolio website.
However, I cannot figure out how to display the project on a regular website. I changed the router to “history” mode and updated the public path, but all I get is a blank white page when navigating to the index.html file in the dist folder. Is there any documentation on how to achieve this?

Any guidance is greatly appreciated.

Is there a recommended way to stagger QTransition Group Animations with Animate.css?

I’ve tried many different ways, including binding the enter and leave attributes to methods, and then running a setTimeout, but this didn’t work.

I’ve also tried using a regular Vuejs transition-group and staggering according to the Vuejs docs, but I end up with empty spaces in the dom between the list items.

Any suggestions or recommendations on how to achieve this?

Following is a stripped version of my current list component:

      <q-list no-border>
        <q-list-header>All Items:</q-list-header>
        <q-transition group appear enter="fadeIn"
        leave="bounceOutLeft">
          <q-item v-for="(item, index) in computedItems" :key="index">
                 // list item content
          </q-item>
        </q-transition>
      </q-list>

Thanks so much

If anyone is having an issue with the footer ending up in the middle of the page, I found that fixing the footer to the bottom using css helps:

        <!-- Footer -->
        <q-toolbar slot="footer" style="position: fixed; bottom: 0;">
          <q-toolbar-title>
            Layout Footer
          </q-toolbar-title>
        </q-toolbar>

My experience has been that if I have a lot of content and I scroll to the bottom, pulling from the top of the page no longer works. However, if you are rendering new content at the top of the page (like in the docs) then it’s really not an issue I guess…

@benoitranque @rstoenescu

Great! That works ! Thanks

Template:

    <q-list no-border striped>
      <q-list-header>My List:</q-list-header>
      <q-transition appear group enter="fadeIn" leave="fadeOut">
        <q-item v-for="(item, index) in items" :key="index" :class="{striped: isOdd(index)}">
          <q-item-side>
            <q-checkbox v-model="item.completed" @click.native="saveList" />
          </q-item-side>
          <q-item-main :label="item.label" />
        </q-item>
      </q-transition>
    </q-list>

Return true if index divides by 2:

    methods: {
          isOdd (index) {
            if (index % 2 === 0) {
                 return true
             }
          }
      }

Stylus Class:

    .striped
        background-color #ccc

Okay, what I discovered is that the striped prop doesn’t work if wrapped with q-transition. I removed q-transition and the list items are highlighting correctly.

I don’t know why, so feel free to chime in with a reason/solution.

Thanks

@benoitranque

My apologies…I forgot to include that in the example.

I did try using the “striped” prop, but I still don’t get striped list items.

I’m going to do some more testing on it tonight.

Thanks for your response

I have the following component, however the striped property doesn’t seem to be working.

    <q-list no-border>
      <q-list-header>My List:</q-list-header>
      <q-transition appear group enter="fadeIn" leave="fadeOut">
        <q-item v-for="(item, index) in items" :key="index">
          <q-item-side>
            <q-checkbox v-model="item.completed" @click.native="saveList" />
          </q-item-side>
          <q-item-main :label="item.label" />
        </q-item>
      </q-transition>
    </q-list>

Is there any way to apply the ‘striped’ vue-propery to list items rendered with v-for?

Okay…so I found the best solution, for my case, was to downgrade from latest Cordova ^8.0.0 to ^7.0.1.
The directory structure for the latest Cordova ^8.0.0 is different, and there is not yet sufficient documentation. This was causing all kinds of problems.