Update: In my case, there was an upgrade to @quasar/app ^2, so the best is https://quasar.dev/quasar-cli/app-upgrade-guide

@iodoli I came up to a stupid but working solution. I created ID of the doc and same ID is used for the first photograph (nosql db used), so my v-model(carousel) and :name(carousel-slide) are the same, thus slides are loading and there are no empty slides. I believe it is a kind of workaround, good approach still pending

@dobbel nice articles, thank you. I understand new ideas in v-model binding. For now, I set unique v-model for q-carousel, but on the result page, no slide is selected by default, slides should be clicked to make them visible. This because carusel’s v-model doesn’t synchronized with carousel-slide’s name property right? If Im setting other values(@same with v-model) apart from photo.Id, I receive error that duplicate keys detected in carousel-slide

Need help. I have a card with v-for and inside I have carousel-slide with v-for. For carousel itself, there is v-model, and as in the tutorials I used slide: 1. I get a carousel working with images, but once I’m changing slides, the slides changing in all q-cards I have. My problem is how to make each carousel independent in swipe action. I understand carusel’s v-model is the one that need to be changed, but have no idea how to do it

//photo.id in every collection starts with 1
<q-card 
     v-for="(promo, key) in getPromos"
      :key="key"
      :id="key"
      :promo="promo"
    >
      <q-carousel
        v-model="slide"
        arrows
        infinite
        swipeable
        navigation
        animated
        control-color="white"
        padding
        height="300px"
        class="bg-primary text-white shadow-1 rounded-borders"
      >
        <q-carousel-slide
          v-for="(photo, index) in promo.photos"
          :key="index"
          :url="photo"
          :name="photo.Id"
          :img-src="photo.url"
        />
      </q-carousel>
    </q-card>

//in export default
data() { return { slide: 1, }}

Is it a good approach to create a v-model in q-card with a function that will change q-carousel’s v-model value somehow dynamically?

@ssuess maybe firefox is not your default browser, have a look in system preferences settings

Update: In my case, there was an upgrade to @quasar/app ^2, so the best is https://quasar.dev/quasar-cli/app-upgrade-guide

Updated quasar and got error with core-js. my quasar info is:

Operating System - Darwin(19.6.0) - darwin/x64
NodeJs - 12.16.2

Global packages
  NPM - 6.14.4
  yarn - Not installed
  @quasar/cli - 1.0.7
  @quasar/icongenie - Not installed
  cordova - Not installed

Important local packages
  quasar - 1.13.1 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app - 2.0.8 -- Quasar Framework local CLI
  @quasar/extras - 1.9.4 -- Quasar Framework fonts, icons and animations
  eslint-plugin-quasar - Not installed
  vue - 2.6.12 -- Reactive, component-oriented view layer for modern web interfaces.
  vue-router - 3.2.0 -- Official router for Vue.js 2
  vuex - 3.5.1 -- state management for Vue.js
  electron - Not installed
  electron-packager - Not installed
  electron-builder - Not installed
  @capacitor/core - Not installed
  @capacitor/cli - Not installed
  @capacitor/android - Not installed
  @capacitor/ios - Not installed
  @babel/core - 7.11.4 -- Babel compiler core.
  webpack - 4.44.1 -- Packs CommonJs/AMD modules for the browser. Allows to split your codebase into multiple bundles, which can be loaded on demand. Support loaders to preprocess files, i.e. json, jsx, es7, css, less, ... and your custom stuff.
  webpack-dev-server - 3.11.0 -- Serves a webpack app. Updates the browser on changes.
  workbox-webpack-plugin - Not installed
  register-service-worker - 1.7.1 -- Script for registering service worker, with hooks
  typescript - 3.9.5 -- TypeScript is a language for application scale JavaScript development

Quasar App Extensions
  @quasar/quasar-app-extension-qactivity - 1.0.0-beta.5 -- QActivity is an app extension for Quasar for making an activity list

Networking
  Host - MacBook-Pro.local
  en0 - 192.168.0.107

error:

* core-js/modules/es.array-buffer.constructor in ./node_modules/quasar/src/utils/is.js
* core-js/modules/es.array.concat in ./node_modules/@quasar/quasar-app-extension-qactivity/src/component/QActivityItem.js, ./node_modules/quasar/src/lang.js and 36 others
* core-js/modules/es.array.every in ./node_modules/quasar/src/components/option-group/QOptionGroup.js, ./node_modules/quasar/src/components/table/table-row-selection.js
* core-js/modules/es.array.fill in ./node_modules/quasar/src/components/date/QDate.js, ./node_modules/@quasar/app/lib/webpack/loader.transform-quasar-imports.js!./node_modules/babel-loader/lib??ref--2-0!./node_modules/@quasar/app/lib/webpack/loader.auto-import-client.js?kebab!./node_modules/vue-loader/lib??vue-loader-options!./node_modules/vue-pipeline/src/components/Pipeline.vue?vue&type=script&lang=js&
* core-js/modules/es.array.filter in ./node_modules/@babel/runtime/helpers/objectSpread2.js, ./node_modules/quasar/src/history.js and 16 others
* core-js/modules/es.array.find in ./node_modules/quasar/dist/quasar.ie.polyfills.js, ./node_modules/quasar/src/components/date/QDate.js and 6 others
* core-js/modules/es.array.find-index in ./node_modules/quasar/dist/quasar.ie.polyfills.js, ./node_modules/quasar/src/components/menu/ClickOutside.js and 4 others
* core-js/modules/es.array.flat in ./node_modules/quasar/src/components/card/QCard.js, ./node_modules/quasar/src/components/date/QDate.js and 5 others
* core-js/modules/es.array.for-each in ./node_modules/@babel/runtime/helpers/objectSpread2.js, ./node_modules/quasar/dist/quasar.ie.polyfills.js and 30 others
* core-js/modules/es.array.from in ./node_modules/@babel/runtime/helpers/unsupportedIterableToArray.js, ./node_modules/@babel/runtime/helpers/iterableToArray.js and 1 other
* core-js/modules/es.array.includes in ./node_modules/quasar/dist/quasar.ie.polyfills.js, ./node_modules/quasar/src/ssr-update.js and 32 others
* core-js/modules/es.array.index-of in ./node_modules/@babel/runtime/helpers/objectWithoutProperties.js, ./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js and 21 others
* core-js/modules/es.array.iterator in ./node_modules/@babel/runtime/helpers/typeof.js, ./node_modules/@babel/runtime/helpers/iterableToArray.js and 9 others
* core-js/modules/es.array.join in ./node_modules/quasar/src/body.js, ./node_modules/quasar/src/components/select/QSelect.js and 12 others
* core-js/modules/es.array.map in ./node_modules/quasar/src/history.js, ./node_modules/quasar/src/components/chat/QChatMessage.js and 29 others
* core-js/modules/es.array.reduce in ./node_modules/quasar/src/components/date/QDate.js, ./node_modules/quasar/src/mixins/file.js and 3 others
* core-js/modules/es.array.slice in ./node_modules/@babel/runtime/helpers/unsupportedIterableToArray.js, ./node_modules/quasar/src/components/date/QDate.js and 18 others
* core-js/modules/es.array.some in ./node_modules/quasar/src/components/select/QSelect.js, ./node_modules/quasar/src/components/table/table-row-selection.js and 2 others
* core-js/modules/es.array.splice in ./node_modules/quasar/src/history.js, ./node_modules/quasar/src/components/menu/ClickOutside.js and 10 others
* core-js/modules/es.array.unscopables.flat in ./node_modules/quasar/src/components/card/QCard.js, ./node_modules/quasar/src/components/date/QDate.js and 5 others
* core-js/modules/es.function.name in ./node_modules/@babel/runtime/helpers/unsupportedIterableToArray.js, ./node_modules/quasar/src/install.js and 26 others
* core-js/modules/es.map in ./node_modules/quasar/src/utils/is.js
* core-js/modules/es.number.constructor in ./node_modules/quasar/dist/quasar.ie.polyfills.js, ./node_modules/quasar/src/components/btn/QBtn.js and 39 others
* core-js/modules/es.number.is-integer in ./node_modules/quasar/dist/quasar.ie.polyfills.js
* core-js/modules/es.number.to-fixed in ./node_modules/quasar/src/components/range/QRange.js, ./node_modules/quasar/src/components/slider/slider-utils.js and 2 others
* core-js/modules/es.object.assign in ./node_modules/quasar/dist/quasar.ie.polyfills.js, ./node_modules/quasar/src/ssr-update.js and 20 others
* core-js/modules/es.object.entries in ./src/store/store-tours.js
* core-js/modules/es.object.freeze in ./node_modules/quasar/src/install.js
* core-js/modules/es.object.get-own-property-descriptor in ./node_modules/@babel/runtime/helpers/objectSpread2.js
* core-js/modules/es.object.get-own-property-descriptors in ./node_modules/@babel/runtime/helpers/objectSpread2.js
* core-js/modules/es.object.keys in ./node_modules/@babel/runtime/helpers/objectSpread2.js, ./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js and 17 others
* core-js/modules/es.object.to-string in ./node_modules/@babel/runtime/helpers/asyncToGenerator.js, ./node_modules/@babel/runtime/helpers/typeof.js and 16 others
* core-js/modules/es.object.values in ./src/store/store-tours.js
* core-js/modules/es.promise in ./node_modules/@babel/runtime/helpers/asyncToGenerator.js, ./node_modules/quasar/dist/quasar.ie.polyfills.js and 5 others
* core-js/modules/es.promise.finally in ./node_modules/quasar/dist/quasar.ie.polyfills.js
* core-js/modules/es.regexp.constructor in ./node_modules/quasar/dist/quasar.ie.polyfills.js, ./node_modules/quasar/src/components/select/QSelect.js and 4 others
* core-js/modules/es.regexp.exec in ./.quasar/client-entry.js, ./node_modules/quasar/dist/quasar.ie.polyfills.js and 26 others
* core-js/modules/es.regexp.flags in ./node_modules/quasar/src/utils/is.js
* core-js/modules/es.regexp.to-string in ./node_modules/@babel/runtime/helpers/unsupportedIterableToArray.js, ./node_modules/quasar/dist/quasar.ie.polyfills.js and 9 others
* core-js/modules/es.set in ./node_modules/quasar/src/utils/is.js
* core-js/modules/es.string.anchor in ./node_modules/quasar/src/components/menu/QMenu.js, ./node_modules/quasar/src/components/tooltip/QTooltip.js
* core-js/modules/es.string.ends-with in ./node_modules/quasar/dist/quasar.ie.polyfills.js, ./node_modules/quasar/src/history.js and 1 other
* core-js/modules/es.string.fixed in ./node_modules/quasar/src/components/drawer/QDrawer.js, ./node_modules/quasar/src/components/footer/QFooter.js and 1 other
* core-js/modules/es.string.includes in ./node_modules/quasar/dist/quasar.ie.polyfills.js, ./node_modules/quasar/src/ssr-update.js and 15 others
* core-js/modules/es.string.iterator in ./node_modules/@babel/runtime/helpers/typeof.js, ./node_modules/@babel/runtime/helpers/unsupportedIterableToArray.js and 9 others
* core-js/modules/es.string.match in ./node_modules/quasar/src/utils/date.js
* core-js/modules/es.string.replace in ./.quasar/client-entry.js, ./node_modules/quasar/dist/quasar.ie.polyfills.js and 12 others
* core-js/modules/es.string.split in ./node_modules/quasar/dist/quasar.ie.polyfills.js, ./node_modules/quasar/lang/en-us.js and 12 others
* core-js/modules/es.string.starts-with in ./node_modules/quasar/dist/quasar.ie.polyfills.js, ./node_modules/quasar/src/history.js and 3 others
* core-js/modules/es.string.trim in ./node_modules/quasar/src/components/slider/slider-utils.js, ./node_modules/quasar/src/mixins/file.js and 2 others
* core-js/modules/es.symbol in ./node_modules/@babel/runtime/helpers/typeof.js, ./node_modules/@babel/runtime/helpers/objectSpread2.js and 3 others
* core-js/modules/es.symbol.description in ./node_modules/@babel/runtime/helpers/typeof.js, ./node_modules/@babel/runtime/helpers/iterableToArray.js and 1 other
* core-js/modules/es.symbol.iterator in ./node_modules/@babel/runtime/helpers/typeof.js, ./node_modules/@babel/runtime/helpers/iterableToArray.js and 1 other
* core-js/modules/es.typed-array.copy-within in ./node_modules/quasar/dist/quasar.ie.polyfills.js, ./node_modules/quasar/src/utils/uid.js
* core-js/modules/es.typed-array.every in ./node_modules/quasar/dist/quasar.ie.polyfills.js, ./node_modules/quasar/src/utils/uid.js
* core-js/modules/es.typed-array.fill in ./node_modules/quasar/dist/quasar.ie.polyfills.js, ./node_modules/quasar/src/utils/uid.js
* core-js/modules/es.typed-array.filter in ./node_modules/quasar/dist/quasar.ie.polyfills.js, ./node_modules/quasar/src/utils/uid.js
* core-js/modules/es.typed-array.find in ./node_modules/quasar/dist/quasar.ie.polyfills.js, ./node_modules/quasar/src/utils/uid.js
* core-js/modules/es.typed-array.find-index in ./node_modules/quasar/dist/quasar.ie.polyfills.js, ./node_modules/quasar/src/utils/uid.js
* core-js/modules/es.typed-array.for-each in ./node_modules/quasar/dist/quasar.ie.polyfills.js, ./node_modules/quasar/src/utils/uid.js
* core-js/modules/es.typed-array.includes in ./node_modules/quasar/dist/quasar.ie.polyfills.js, ./node_modules/quasar/src/utils/uid.js
* core-js/modules/es.typed-array.index-of in ./node_modules/quasar/dist/quasar.ie.polyfills.js, ./node_modules/quasar/src/utils/uid.js
* core-js/modules/es.typed-array.iterator in ./node_modules/quasar/dist/quasar.ie.polyfills.js, ./node_modules/quasar/src/utils/uid.js
* core-js/modules/es.typed-array.join in ./node_modules/quasar/dist/quasar.ie.polyfills.js, ./node_modules/quasar/src/utils/uid.js
* core-js/modules/es.typed-array.last-index-of in ./node_modules/quasar/dist/quasar.ie.polyfills.js, ./node_modules/quasar/src/utils/uid.js
* core-js/modules/es.typed-array.map in ./node_modules/quasar/dist/quasar.ie.polyfills.js, ./node_modules/quasar/src/utils/uid.js
* core-js/modules/es.typed-array.reduce in ./node_modules/quasar/dist/quasar.ie.polyfills.js, ./node_modules/quasar/src/utils/uid.js
* core-js/modules/es.typed-array.reduce-right in ./node_modules/quasar/dist/quasar.ie.polyfills.js, ./node_modules/quasar/src/utils/uid.js
* core-js/modules/es.typed-array.reverse in ./node_modules/quasar/dist/quasar.ie.polyfills.js, ./node_modules/quasar/src/utils/uid.js
* core-js/modules/es.typed-array.set in ./node_modules/quasar/dist/quasar.ie.polyfills.js, ./node_modules/quasar/src/utils/uid.js
* core-js/modules/es.typed-array.slice in ./node_modules/quasar/dist/quasar.ie.polyfills.js, ./node_modules/quasar/src/utils/uid.js
* core-js/modules/es.typed-array.some in ./node_modules/quasar/dist/quasar.ie.polyfills.js, ./node_modules/quasar/src/utils/uid.js
* core-js/modules/es.typed-array.sort in ./node_modules/quasar/dist/quasar.ie.polyfills.js, ./node_modules/quasar/src/utils/uid.js
* core-js/modules/es.typed-array.subarray in ./node_modules/quasar/dist/quasar.ie.polyfills.js, ./node_modules/quasar/src/utils/uid.js
* core-js/modules/es.typed-array.to-locale-string in ./node_modules/quasar/dist/quasar.ie.polyfills.js, ./node_modules/quasar/src/utils/uid.js
* core-js/modules/es.typed-array.to-string in ./node_modules/quasar/dist/quasar.ie.polyfills.js, ./node_modules/quasar/src/utils/uid.js
* core-js/modules/es.typed-array.uint8-array in ./node_modules/quasar/src/utils/uid.js
* core-js/modules/es.typed-array.uint8-clamped-array in ./node_modules/quasar/dist/quasar.ie.polyfills.js
* core-js/modules/web.dom-collections.for-each in ./node_modules/@babel/runtime/helpers/objectSpread2.js, ./node_modules/quasar/dist/quasar.ie.polyfills.js and 25 others
* core-js/modules/web.dom-collections.iterator in ./node_modules/@babel/runtime/helpers/typeof.js, ./node_modules/@babel/runtime/helpers/iterableToArray.js and 7 others
* core-js/modules/web.url in ./node_modules/quasar/src/components/uploader/QUploaderBase.js

Steps already were taken:

1. Removed core-js line from package
2. Drop node modules
3. Drop package-lock
4. npm install

4-steps execution gave the same error, so added npm install --dev core-js@2.6.5 as 5-th step, as was advised by @metalsadman, and the error still to be seen. What to do?

@iodoli The query starts from the beginning all the time and not from the saved last visited query cursor. any idea appreciated!)

I have this code in vuex sotre actions and there is a problem with a reference to the last queried item. I’m viewing console results, and my loop goes all the time from the beginning of items from the firestore firebase database.

itemsInfinity({ commit, getters }, index, done) {
    //get value of the last queried Item from state
    let lastItem = getters.getLastQItem;
    let startAtLastQ = lastItem ? lastItem : null;

    let tasksRef = fireStoreDb
      .collection('users')
      .doc(userId)
      .collection('tours')
      .orderBy('tourStartPrice', 'desc')
      .startAt(startAtLastQ)
      .limit(5);

    tasksRef
      .get()
      .then(function(querySnapshot) {
        // Get the last visible document and save to state
        let lastQItem = querySnapshot.docs[querySnapshot.docs.length - 1];     
        commit('setLastQItem', lastQItem);
       
        // save items to the state
        querySnapshot.forEach(function(doc) {
          commit('addItem', {
            id: doc.id,
            item: doc.data()
          });
        });
      })
      .catch(function(error) {
        console.log('Error getting items: ', error);
      });

  },

I found that lastQItem, gave me an error:

Error getting documents:  TypeError: Converting circular structure to JSON

So I googled and found a technique. I replaced circular links and I thought it will solve my issue, this was added to code and commit setLastQItem started to go well, the value of the last queried item-1 stored successfully, but Im still getting data starting from the first item from firestore db

import * as util from 'util'; // has no default export
import { inspect } from 'util'; // or directly
...
let lastQItemCircular = util.inspect(lastQItem);
commit('setLastQItem', lastQItemCircular);

Unfortunately after googling and trying so many things I’m stuck at this point. Guys, what is wrong with my code and/or approach?

@nothingismagick thanks for advice, I will try to test vue-croppa now. I forgot to mention I used https://github.com/fengyuanchen/compressorjs with v0.17.20 and it gave me that error

@igor-rotaexata Can you share how you imported Image Compressor as a plugin? Im keep getting error like - “Cannot call a class as a function”.