Quasar Framework

ItaiLewin

@itailewin
fixed by removing VUEX,

ItaiLewin

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

ItaiLewin

when use:

quasar new plugin store

i get the following error:

app:new ⚠️  Invalid asset type: plugin +0ms

ItaiLewin

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.

ItaiLewin

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.
0_1551446214655_a1b35fd3-6fdf-487e-9b0c-923fed3623eb-image.png
the result:
0_1551446289167_9c9dd935-057e-470d-b9ce-46196059126b-image.png
but if I comment it out, it is visible:
0_1551446374958_77e91753-1070-4662-91fa-d66aa12cf50a-image.png

0_1551446425464_4dbfe78f-1b01-419a-bd0d-dc7a45ff7c4a-image.png
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>

ItaiLewin

@ItaiLewin

Best posts made by ItaiLewin

Latest posts made by ItaiLewin