@dobbel Yes i am new, but i did this, look at the example in the snippet counter is reactive for the label but no in the rule

I noticed that the q-input rule’s error message is not reactive. Code:

The counter only increment when I change the q-input text… how can I make this reactive?

<div id="q-app">
  <div class="column q-gutter-md q-pa-md" style="max-width: 400px">
    <q-input
      ref="input"
      filled
      v-model="model"
      :rules="[
          val => (!!val && val.length < 2) || `Counter is ${counter}`,
        ]"
      lazy-rules
    ></q-input>

    <div>Counter is {{ counter }}</div>
    <q-btn label="Increment" @click="counter++" color="primary"></q-btn>
    <q-btn label="Reset Validation" @click="reset" color="secondary"></q-btn>
    <div>Quasar {{ $q.version }}</div>

new Vue({
  el: '#q-app',
  data () {
    return {
      model: '',
      counter: 1
    }
  },

  methods: {
    reset () {
      this.$refs.input.resetValidation()
    }
  },
  mounted () {
    this.$refs.input.validate()
  }
})

You can run this example in: https://stackoverflow.com/questions/64154704/how-can-i-make-reactive-rules-in-quasar

Hi guys
I am a noob usinhg quasar - vueJS and I need to validate a q-input with a template variable but don’t work…
Is this possible?
I did a sandbox with a little example:

https://codesandbox.io/s/blissful-meadow-e64gh?file=/src/pages/Index.vue

<template>
  <q-page class="flex flex-center">
    <q-form class="q-gutter-md">
      <q-input
        v-model="text1"
        label="text1"
        :rules="[
          (val) => !!val || 'This field is required',
          (val) => !falgs.flag1 || 'The flag1 must be activaed'
        ]"
      >
      </q-input>
      <q-input
        v-model="text2"
        label="text2"
        :rules="[(val) => !!val || 'This field is required']"
      >
      </q-input>
    </q-form>
  </q-page>
</template>

<script>
export default {
  name: 'PageIndex',
  data() {
    return {
      text1: '',
      text2: '',
      flags: {
        flag1: false,
        flag2: false
      }
    }
  }
}
</script>

Thanks @metalsadman and @dobbel it is working now

@metalsadman Thanks, but I dont understand how to use the slot can you put an example?

I have a problem with the clearable input because then when the input lost the focus then the focus goes to the (x) and no to the other input I want the the (x) button doesn’t have a focus

Here I put a code snippet https://stackoverflow.com/questions/64109189/quasars-clearble-q-input-problem-with-focus?noredirect=1

Thanks guys