How can I make reactive rules ?

yk-davdomin

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

dobbel

@yk-davdomin

1) v-model="counter"
2 data () { return { model: '', counter: 1 } },

Are you new to Vue?

yk-davdomin

@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

metalsadman

@yk-davdomin try counter= counter +1, and you are using lazy rules btw, it only fires on blur.

dmoylan

@yk-davdomin :rules contains functions which are called when the input is validated, meaning that the value of counter inside of rules = whatever the value was when the function was called. To achieve what you are trying to do here, you could change the button to call a method:

btnClick() {
   this.counter++
   this.$refs.input.validate() //Calling validate at this point will update the error message in the rule.
}

To achieve rules that are truly reactive to data/computed props, you would need to code your own validation logic and not rely on input.validate()

metalsadman

@yk-davdomin ~~you probably just need a nextTick there if you want to fire it on mounted.~~ just read the docs and the tip states

By default, for perf reasons, a change in the rules does not trigger a new validation until the model changes. In order to trigger the validation when rules change too, then use reactive-rules Boolean prop. The downside is a performance penalty (so use it when you really need this only!) and it can be slightly mitigated by using a computed prop as value for the rules (and not specify them inline in the vue template).

but yeah my first impression about the lazy-rules seem correct.

If you set lazy-rules, validation starts after first blur. Starting with v1.11+, if lazy-rules is set to ondemand String, then validation will be triggered only when component’s validate() method is manually called or when the wrapper QForm submits itself.

as stated there, you also need to call validate() method, on your QBtn click handler.

https://codepen.io/metalsadman/pen/XWdLgOP

metalsadman

@yk-davdomin so i’m guessing it’s solved? if so, can please edit the title of your thread and put something like [Solved] title, thx.

No More Posting New Topics!

How can I make reactive rules ?