hej, noone could help?

@turigeza , Good point, but I do some mistake then I created post. In my console I have error

this.$refs.domainInput.validate(…).then is not a function

But, this error still occure.

hej

Then I use quasar validate method everything is working, but I have error:

this.$refs.input.validate(...).then is not a function

my code

        <q-input
          v-model="accountData.Company.subdomain"
          outlined
          color="secondary"
          label-color="grey"
          :label="$t('wizzard.subdomain')"
          :placeholder="$t('wizzard.ex: company name')"
          class="inputField inputField__input-domain"
          type="text"
          :rules="[val => validation.requireRule(val), val => validation.noUppearCaseRule(val), val => validation.domainNoExistRule(accountData.Company), val => validation.noSpecialCharRule(val)]"
          lazy-rules
          ref="domainInput"
          @input="validate"
        >
         ...

            validate(val: boolean): void {
           (this.$refs.domainInput as any & { validate: () => boolean }).validate().then((res: boolean) => { this.isValid = res;});
         }   

Why it occured? I try to fix it, but I don’t know how.

Woohoo

I found answer. The problem was cause by giving input inside q-dialog. I solved it by overwritten classes:

.q-field–outlined .q-field__control {
border: 1px solid $primary !important //then is not focused keep gray (primary) color
}

.q-field–focused.q-field–outlined .q-field__control,
.q-field–focused.q-field–outlined .q-field__control:before {
border: none !important; //then is focused remove default border
}

and my q-input have color=“secondary”

So, for future, be carefully then you give your input inside dialog.

I have big problem with q-input. I need to gray border, that will be change to orange after click. But, if I add color=“secondary” to my q-input border is orange whole time, not only after focused.

Maybe this is because I have to use quasar plugin, maybe this is because I have custom colors in my quasar.variables, it’s hard to say. I would try to change it manually, but I even can’t find some class responsible for it. There is no something like

border: xpx solid secondary color hex or rgb

or something like that, then you defined my secondary color for border. So I even don’t know which class I should to overwritten. Maybe someone can help?

Hi @s-molinari

Thank you for your quickly answer. I’m trying to use it example to build exactly what I need.

There is possible to do select-input in quasar? You know, you have list of value (the best as object, not array), but can add new value then user type something?

How to remove or hide vertical scroll from quasar dialog?

Hi I need to change card direction depend on screen size. What is the best method to do it? Card have to have specific width, margins, paddings and grid

<div :class="panelDitection">
   <div class="col" v-for=...>
     <Card class="cardClass" />

......

<script>
  get panelDitection (): string {
    return this.$q.screen.lt.sm ? 'column' : 'row'
  }

or maybe

<div :class="panelDitection">
   <Class class="col cardClas" v-for=...>

......

<script>
  get panelDitection (): string {
    return this.$q.screen.lt.sm ? 'column' : 'row'
  }

But non of this method seems be good. I don’t thing adding class col here is good idea, but I don’t know what different I can to do.

hi s.molinari, thank you very much for your answer.

I just using it for a while, but unfortuntelly I was’t resposible for install it. And I don’t have contact to person who did it.

I’m not sure but it looks like some quasar styles won’t work. Especially I have big problem with q-input. It’s looks really bad, no border, no alignment. And run out of contener

Maybe someone had similar problem? I’m not sure but maybe q-page or q-layout are importeand for appropriate working of some styles? I’ts not quasar cli unfortuantelly, it’s add as vue plugin.

Maybe someone can help.

Select with different label and value is something really important, but in quasar doc there are no simple solution how to do this. There are something with sanitizations, chip, and other things, that make that examples are really not clear.

I think, this is more importand showed, how to do it clearly, then how to change color.

@metalsadman thank you

Hi

I need that my header text should be h4 on desktop screen, but h5 on tablets and mobiles. But something like:

<div class="text-h4-sm text-h5 q-my-lg text-center">{{ title }}</div>

won’t work and I can’t found how to do it in documentation.

I need to create stepper, but not with icons in header, but with some bar. This is possible?

hi, someone is still here?

Thank you for your answer.

First one of your solution didn’t help.

About second: class API you mean Class-based? I had it because it give me vue-property-decorators. And, exaclly because of it, it’s strange for me.

Hi everyone

How to define variable in quasar typescript component? I tried this:

<template>
  <div>
    {{test}}
  </div>
</template>

<script lang="ts">
import { Vue, Component } from "vue-property-decorator";

@Component
export default class Navigation extends Vue {

private test = "this is test message"

}
</script>

end error:

vue.runtime.esm.js?2b0e:619 [Vue warn]: Property or method "test" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

found in

---> <Navigation> at src/components/navigation/Navigation.vue
       <App> at src/App.vue
         <Root>

I use quasar-cli and yarn
package json:

"dependencies": {
  "@quasar/extras": "^1.0.0",
  "axios": "^0.18.1",
  "quasar": "^1.9.5",
  "vue-class-component": "^7.2.2",
  "vue-i18n": "^8.0.0",
  "vue-property-decorator": "^8.3.0"
},
"devDependencies": {
  "@quasar/app": "^1.6.2",
  "@types/node": "^10.17.15",
  "@typescript-eslint/eslint-plugin": "^2.17.0",
  "@typescript-eslint/parser": "^2.17.0",
  "babel-eslint": "^10.0.1",
  "eslint": "^6.8.0",
  "eslint-config-airbnb-base": "^14.0.0",
  "eslint-loader": "^3.0.3",
  "eslint-plugin-import": "^2.20.1",
  "eslint-plugin-vue": "^6.1.2"
},
"engines": {
  "node": ">= 10.18.1",
  "npm": ">= 6.13.4",
  "yarn": ">= 1.21.1"
},
"browserslist": [
  "last 1 version, not dead, ie >= 11"
],
"resolutions": {
  "@babel/parser": "7.7.5"
}