Navigation

    Quasar Framework

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

    Posts made by Coude

    • RE: We need your help! Quasar 2021 Community Survey

      @Hawkeye64 and @s-molinari Thank you for your answers! 🙂

      posted in Announcements
      C
      Coude
    • RE: We need your help! Quasar 2021 Community Survey

      @s-molinari Hi, any updates about the results? 🙂

      posted in Announcements
      C
      Coude
    • RE: Close drawer from deep component in V1

      Hi,

      @currycode I would say that using v-model of the drawer and click event for elements inside it, it should do the work. You have some closely related examples in the docs

       <q-drawer
              v-model="showDrawer"
            >
              <q-scroll-area class="fit">
                <q-list>
                  <q-item clickable v-ripple @click="showDrawer = !showDrawer">
                    <q-item-section avatar>
                      <q-icon name="inbox" />
                    </q-item-section>
                 </q-item>
      (...)
              </q-list>
          </q-scroll-area>
       </q-drawer>
      
      posted in Help
      C
      Coude
    • RE: vue-tel-input with Quasar

      Hi,

      This is a start, probably far from perfect, but enough to use vue-tel-input with quasar without too much pain. It is fast and easy solution, which works ok.

      <template>
        <q-field
          label="Your phone number"
          stack-label
          :error="isError">
          <vue-tel-input
            :wrapper-classes="['no-border','no-box-shadow','no-ouline','wrapper-vue-tel-input-in-qfield']"
            input-classes="input-vue-tel-input-in-qfield"
            @input="handleInput"
          >
          </vue-tel-input>
        </q-field>
      </template>
      
      <style>
      /* note: the height 98% is to avoid the inner input to hide the bottom border of q-field */
      .input-vue-tel-input-in-qfield {
        height:98%;
        margin-bottom: auto;
      }
      
      /* note: I use color dark for my text, I am forcing it because otherwise it is the same color as q-field - so here primary color or negative color when error - */
      .wrapper-vue-tel-input-in-qfield li.vti__dropdown-item {
        color: var(--q-color-dark);
      }
      </style>
      
      <script>
      import { VueTelInput } from 'vue-tel-input';
      
      export default {
        name: 'InputPhone',
        props: {
          //
        },
        components: {
          VueTelInput,
        },
        data() {
          return {
            isError: false,
          }
        },
        methods: {
          handleInput (val, objVal) {
            console.log(val, objVal);
            this.isError = !objVal.isValid;
          }
        },
      }
      </script>
      
      posted in Help
      C
      Coude
    • RE: How to add transition on q-header component when they reveal or hide out?

      I would use the reveal event (see docs )

      In template:

      <q-header reveal elevated class=“bg-pink-10 q-pa-xs text-white animate” height-hint=“98” 
      @reveal="handleReveal"
      :class="isRevealed ? 'revealed' : 'not-revealed'"
      >
      ...
      </q-header>
      

      in script:

      handleReveal(isRevealed) {
        this.isRevealed = isRevealed;
      //do something else if you want
      }
      

      and in style you can add css-transition

      .revealed {
        background-color:rgba(255,255,255,0.94);
        transition: background-color 0.25s ease-in-out;
      }
      
      .not-revealed {
        background-color:rgba(255,255,255,0.01);
        transition: background-color 0.25s ease-in;
      }
      

      This is a start, hope it might help.

      posted in Help
      C
      Coude
    • vue-tel-input with Quasar

      Hi,

      I am planning to use vue-tel-input ( here ) in my quasar app (made using vue-cli). Do anyone has some experience with it?
      More precisely, I would like to know if we may manage to get the quasar/material look using this component (if I wrap it inside a QField, would it be enough?). If you have some advices, I would be glad to hear it ;).

      posted in Help
      C
      Coude
    • RE: We need your help! Quasar 2021 Community Survey

      I’m looking forward to see the results! 🙂

      posted in Announcements
      C
      Coude
    • RE: ssr, preFetch and store : have to go to $store._vm._data.$$state

      @metalsadman I just tried it, it does not change anything.
      I added getters, it works better.

      One issue I have, it’s that I am not able to lazy-register my stores. I’ve tried many many different things and I am getting hydration issue (likely due to data difference between front and ssr) and vuex namespace duplicates. So, for now, I am registering my vuex modules/stores globally in the index, it is not optimal but at least it is working!

      posted in Help
      C
      Coude
    • RE: ssr, preFetch and store : have to go to $store._vm._data.$$state

      @beets
      Thank you for your answer. Of course I’ve tried this.home = this.$store.state.cms.all; 🙂 (That’s why I have those console.log, because I tried to find if it was hidden somewhere, and it was!).

      And, that’s what I thought about during sleep : I did not make a getter.

      posted in Help
      C
      Coude
    • ssr, preFetch and store : have to go to $store._vm._data.$$state

      Hello,

      I am using Quasar for ssr. I am fetching data from strapi cms (which is on the same server as quasar).

      I am using prefetch and vuex according to what I understood from the docs.

      I am seeing the data I want to see on my page BUT, as you will see below, I have to dig to " this.$store._vm._data.$$state.cms.all " to get them. Why? I do not know what I did wrong or what might be wrong. If you need any other info to answer, just ask, I would like to undestand what is wrong or what I misundestood (I am new to vuex, not too new to quasar/vue etc though) :).

      Thank you!

        preFetch ({ store, currentRoute, previousRoute, redirect, ssrContext, urlPath, publicPath }) {
          return store.dispatch('cms/getDataFromServer', {url:'http://localhost:1337/home'})
        },
      (...)
        mounted: function () {
          this.$store.registerModule('cms', cms, { preserveState: true });
          console.log(this.$store, this.$store._vm._data.$$state.cms.all);
          this.home = this.$store._vm._data.$$state.cms.all; // WHY??
        },
      

      the index store is as follow:

      import Vue from 'vue';
      import Vuex from 'vuex';
      
      import cms from './cms'
      
      Vue.use(Vuex)
      
      export default function (/* { ssrContext } */) {
        const Store = new Vuex.Store({
          modules: {
            cms
          },
      
          // enable strict mode (adds overhead!)
          // for dev mode and --debug builds only
          //strict: process.env.DEBUGGING
        })
      
        return Store
      }
      
      

      action.js

      import { axiosInstance } from '../../boot/axios.js';
      
      async function getDataFromServer ({ commit }, param) {
        return axiosInstance.get(param.url).then(({ data }) => {
          commit('create', data)
        })
      }
      
      export { getDataFromServer };
      
      posted in Help
      C
      Coude
    • [QTable / Q-Table] When should I use server request (how many rows?) ?

      Hi,

      In the docs for QTable, it is written that “When your database contains a big number of rows for a Table… [well, you should use @request and server calls]”. My question is: roughly, how many rows is “a big number of rows”? 100s? 1000s? more?
      Does it make sense to trigger server calls only if the number of rows is big enough? For instance, for someone starting to use my app and, thus, who does not have a lot of data to display, I may save some server calls.

      Thank you if you may answer 🙂 .

      posted in Help
      C
      Coude
    • RE: Q-btn-dropdown ARIA accessibility - arrow keys

      @btree thanks for the tip, was very useful to me (I made a custom autocomplete using a text input (q-input) and a dropdown menu (q-menu) ). 🙂

      posted in Useful Tips (NEW)
      C
      Coude
    • RE: No circle to check QRadio

      I do not know what was changed, but since I updated to the 1.9.1 version, the circles get shown even in development mode. Thanks.

      posted in Help
      C
      Coude
    • RE: No circle to check QRadio

      Ahhh, I just tried to build (“npm run build” instead of “npm run serve”) my app, and then I can see the circles of the radios. Is there some tweaks to generate the svgs even in development mode?
      Thanks.

      posted in Help
      C
      Coude
    • No circle to check QRadio

      Hi,

      I am using latest version of quasar with vue-cli.
      Trying to add some radio group, it does not work : the circle area to check the radio is not showing (see below).
      Screenshot_2020-02-03.png

      When I look the code in my browser (firefox) I have that:

      <div tabindex="0" class="q-radio cursor-pointer no-outline row inline no-wrap items-center">
        <div class="q-radio__inner relative-position no-pointer-events q-radio__inner--active">
           <input type="radio" class="q-radio__native q-ma-none q-pa-none invisible">
           <div class="q-radio__bg absolute"><div class="q-radio__outer-circle absolute-full"></div>
           <div class="q-radio__inner-circle absolute-full"></div>
         </div>
      </div>
      <div class="q-radio__label q-anchor--skip">Line</div></div>
      

      while when I look to the code in the quasar documentation the “q-radio__inner-circle” div is not there, replaced by the svg of the circle. So, the issue must be that the svg is not generated, any ideas why?

      Thanks a lot 🙂 .

      posted in Help
      C
      Coude