Posts made by Coude

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

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

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>

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>

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.

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

I’m looking forward to see the results!

@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!

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

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 };

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 .

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

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.

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.

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

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 .