Navigation

    Quasar Framework

    • Register
    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    1. Home
    2. danielsalles
    • Profile
    • Following
    • Followers
    • Topics
    • Posts
    • Best
    • Groups

    danielsalles

    @danielsalles

    2
    Reputation
    20
    Posts
    416
    Profile views
    1
    Followers
    0
    Following
    Joined Last Online
    Age 27

    danielsalles Follow

    Best posts made by danielsalles

    • How can I access vue instance?

      I have had several problems with flow.
      I would like to access the localStorage (plugin) inside router / index.js for example.

      But the quasar load Router and then loads the Plugins, thus being Vue.localStorage be undefined :/.

      plugins/localStorage.js

      import VueLocalStorage from 'vue-localstorage'
      
      export default ({ app, router, Vue }) => {
      
        Vue.use(VueLocalStorage)
      
      }
      
      

      router/index.js

      import Vue from 'vue'
      import VueRouter from 'vue-router'
      
      import routes from './routes'
      
      Vue.use(VueRouter)
      
      const Router = new VueRouter({
        /*
         * NOTE! Change Vue Router mode from quasar.conf.js -> build -> vueRouterMode
         *
         * If you decide to go with "history" mode, please also set "build.publicPath"
         * to something other than an empty string.
         * Example: '/' instead of ''
         */
      
        // Leave as is and change from quasar.conf.js instead!
        mode: process.env.VUE_ROUTER_MODE,
        base: process.env.VUE_ROUTER_BASE,
        scrollBehavior: () => ({ y: 0 }),
        routes
      })
      
      Router.beforeEach((to, from, next) => {
        Vue.localStorage.set('teste', 'teste')
        next()
      })
      
      export default Router
      
      

      I need to access localStorage to check if a saved token exists, and if there is user information look for on the server.

      posted in Help
      danielsalles
      danielsalles
    • RE: How can I access vue instance?

      @rstoenescu Oh, my bad.

      I had added in components. Now I’ve got it, and it’s working.

      Many thanks for the support offered 🙂

      posted in Help
      danielsalles
      danielsalles

    Latest posts made by danielsalles

    • RE: Problem using assets
      <@singularity>-<⎇ master>-<±>-> quasar -v
      0.15.11
      
      posted in Help
      danielsalles
      danielsalles
    • RE: Problem using assets

      Resolve: background: url(../statics/background/exportada1.png);

      posted in Help
      danielsalles
      danielsalles
    • Problem using assets

      I found the way the documentation (http://quasar-framework.org/guide/app-handling-assets.html) is confusing. I do not quite understand how I should use the assets, and how to put them in the background. It is giving a mistake and it seems from the webpack, but I do not know the right one.

      <template>
        <div class="background-index">
          <q-page class="flex flex-center">
            <div class="self-end full-width">
      
              <transition-group
                appear
                enter-active-class="animated fadeIn"
                leave-active-class="animated fadeOut"
              >
      
                <q-btn class="full-width q-mb-sm q-mx-lg" color="primary" label="Entrar" key="login-button" @click="$router.push('/user/login')" />
                <q-btn class="full-width q-mb-md q-mx-lg" color="faded" label="Faça parte" key="singup-button" @click="$router.push('/user/register')" />
              </transition-group>
            </div>
          </q-page>
        </div>
      </template>
      
      <style>
      .background-index {
        background: url(./assets/exportada1.png);
      }
      </style>
      
      <script>
      export default {
        name: 'PageIndex'
      }
      </script>
      

      Erro:
      alt text

      posted in Help
      danielsalles
      danielsalles
    • RE: Dialog does not open with ActionSheet

      @rstoenescu Investigating further with a user at discordapp we came to the following conclusion.

      https://github.com/vuejs/vue/issues/7028

      We do not know how the Action Sheet works underneath the cloths, but probably this security in the browser that is preventing the dialog from appearing.

      I’ve even tried adding the Action Sheet by component, but it did not work. But by btn it works normally. If you have any other solution, just say so.

      Edit:
      Probably the quasar is doing something that changes the behavior of an interaction, or something along those lines. I do not know, because I do not know Quasar in depth.

      posted in Help
      danielsalles
      danielsalles
    • RE: Dialog does not open with ActionSheet

      Up

      Because of the spam posted in the category.

      posted in Help
      danielsalles
      danielsalles
    • Dialog does not open with ActionSheet

      I’m trying to make a custom upload, because what’s in Quasar would not answer me.
      Basically what I want is to click on the ActionSheet item, and it will open the upload dialog.
      But this does not happen. When the click() event is triggered, the dialog does not open. This does not happen when I change the ActionSheet for a btn. But I do not want it to be btn, but actionsheet.

      <input type="file" accept="image/*" ref="file" @click="console" />
      
          updatePhotoWithAction () {
            this.$q.actionSheet({
              title: 'Alterar foto',
              actions: [
                {
                  label: 'Carregar nova',
                  icon: 'file upload',
                  color: 'blue',
                  handler: () => {
                    this.$refs.file.click()
                    console.log('DOM', this.$refs.file)
                    // OPEN MODAL
                    // this.opened = true
                  }
                },
                {},
                {
                  label: 'Remover foto',
                  icon: 'delete',
                  color: 'negative',
                  handler: () => {
                    this.$q.notify('Deleted Article')
                  }
                }
              ]
            })
          }
      

      this.$refs.file exists normally. Even the DOM is picked up normally, and the event fired. The problem is with the dialog itself.

      alt text
      The message “Event click() of the triggered input, but does not open the dialog.” appears because I logged in to the @click = "console" of the input file element.

      Before they ask. The upload of the quasar does not answer, because I want it to use the ActionSheet to fetch the image, and then open a modal with the croopie.

      posted in Help
      danielsalles
      danielsalles
    • RE: qPageSticky to fix header/footer?

      @rstoenescu said in qPageSticky to fix header/footer?:

      @danielsalles Hi, you’re missing out on a lot that QLayout can do for you. Check out the demo and play with the “view” prop 😉

      A simple reveal true solved my problem.

      Thank you!

      posted in Help
      danielsalles
      danielsalles
    • qPageSticky to fix header/footer?

      I’m trying to keep the header/footer always on my screen. And after some research on the documentation, I saw that q-page-sticky could solve my problem. But I guess it was not what I expected.

      I wish the header/footer simply stays on the screen all the time, and the scroll only happens on the q-page-container. Do you understand?

      <template>
      <q-page-sticky expand position="bottom">
        <q-layout-footer>
          <q-tabs class="shadow-2" align="justify">
            <q-route-tab to="/" exact slot="title" icon="search" label="Buscar" />
            <q-route-tab to="/" exact slot="title" icon="all inclusive" label="Descobrir" />
            <q-route-tab to="/" exact slot="title" icon="shopping basket" label="Pedidos" />
            <q-route-tab to="/main/account" exact slot="title" icon="person" label="Conta" />
          </q-tabs>
          </q-layout-footer>
      </q-page-sticky>
      </template>
      

      After using this code, my footer has created a strange margin.
      alt text

      posted in Help
      danielsalles
      danielsalles
    • Sentry + Quasar

      I wanted to know if anyone ever had the experience of working with Quasar with Sentry to catch errors.

      Which practice would you recommend?

      posted in Framework
      danielsalles
      danielsalles
    • RE: Using plugin quasar/vue in Vuex

      But how does someone solve this problem?

      posted in Help
      danielsalles
      danielsalles