@itailewin
fixed by removing VUEX,
I
Latest posts made by ItaiLewin
-
RE: State management - vue-stash
Yes, indeed, thanks
now I try to make it works.
did as the example above, but when try to get user.name I get undefined
but I get 140+ errors like this:typeError: Cannot set property $store of #<Vue> which has only a getter...
-
RE: State management - vue-stash
when use:
quasar new plugin store
i get the following error:
app:new ⚠️ Invalid asset type: plugin +0ms
-
RE: <q-separator /> break render with no errors
Yes, thank’s
I just figured it out after few hours investigating weird UI issues…
that what happend when copy/past from the doc exemples. -
<q-separator /> break render with no errors
I am testing the list components
https://v1.quasar-framework.org/vue-components/list-and-list-items#Example--Left-avatar%2Fthumbnai-QItemSection
and found that the <q-separator /> break the list.
all items after this tag are not show.
the result:
but if I comment it out, it is visible:
and when looking in chrome dev tool, I can see the items are not created after the <q-separator /> tag.
this is my code:<!DOCTYPE html> <html lang="en-us"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="format-detection" content="telephone=no"> <meta name="msapplication-tap-highlight" content="no"> <meta name="viewport" content="user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1,width=device-width"> <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet" type="text/css"> <!-- <link href="https://cdn.jsdelivr.net/npm/animate.css@^3.5.2/animate.min.css" rel="stylesheet"> --> <link rel="icon" href="favicon.png" type="image/x-icon"> <!-- Quasar: Add ".rtl" for the RTL support (example: quasar.rtl.min.css). --> <link href="https://cdn.jsdelivr.net/npm/quasar@1.0.0-beta.5/dist/quasar.min.css" rel="stylesheet" type="text/css"> <!-- Do you need MDI? --> <link href="https://cdn.jsdelivr.net/npm/@mdi/font@^3.0.0/css/materialdesignicons.min.css" rel="stylesheet"> <title>Miklahat Users list</title> <style type="text/css"> .logo-container { width: 255px; height: 242px; position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); } .logo { position: absolute; } </style> </head> <body> <div id="q-app" dir=rtl> <div class="q-pa-md"> <q-layout view="lHh lpr lFf" container style="height: 800px" class="shadow-2 rounded-borders"> <q-header elevated> <q-toolbar> <q-avatar> <img src="https://cdn.quasar-framework.org/img/quasar-logo.png"> </q-avatar> <q-toolbar-title> List with q-separator issue </q-toolbar-title> <q-btn flat round dense icon="whatshot"></q-btn> </q-toolbar> </q-header> <q-page-container> <q-page padding> <div class="q-pa-md" style="max-width: 350px"> <q-list bordered> <q-item clickable v-ripple> <q-item-section avatar> <q-avatar> <img src="https://cdn.quasar-framework.org/img/boy-avatar.png"> </q-avatar> </q-item-section> <q-item-section>Image avatar</q-item-section> </q-item> <!-- this tag has issues: --> <q-separator /> <q-item clickable v-ripple> <q-item-section avatar> <q-icon color="primary" name="bluetooth" /> </q-item-section> <q-item-section>Icon as avatar</q-item-section> </q-item> </q-list> </div> </q-page> </q-page-container> </q-layout> </div> </div> <!-- Firebase App is always required and must be first --> <script src="https://www.gstatic.com/firebasejs/5.8.4/firebase-app.js"></script> <!-- Add additional services that you want to use --> <!-- <script src="https://www.gstatic.com/firebasejs/5.8.4/firebase-auth.js"></script> --> <script src="https://www.gstatic.com/firebasejs/5.8.4/firebase-database.js"></script> <!-- You need Vue too --> <script src="https://cdn.jsdelivr.net/npm/vue@latest/dist/vue.min.js"></script> <!-- VueFire --> <script src="https://unpkg.com/vuefire/dist/vuefire.js"></script> <!-- Quasar --> <script src="https://cdn.jsdelivr.net/npm/quasar@1.0.0-beta.5/dist/quasar.umd.min.js"></script> </head> <script> Vue.component('my-page', { template: '#my-page' }) new Vue({ el: '#q-app', data: function () { return { version: Quasar.version, drawerState: true } }, methods: { launch: function (url) { Quasar.utils.openURL(url) } } }) </script> </body> </html>