Vuelidate validation without v-model

Vuelidate validation without v-model

If you don’t want to modify your model directly, you can still use separate :input and @event bindings. This is especially useful if you are using data from external source, like Vuex store or props. In that case you have to manually take care of setting the $dirty by calling $touch() method when appropriate.

javascript:


import { required, minLength, between } from 'vuelidate/lib/validators'
export default {
  data() {
    return {
      name: '',
      age: 0
    }
  },
  validations: {
    name: {
      required,
      minLength: minLength(4)
    },
    age: {
      between: between(20, 30)
    }
  },
  methods: {
    setName(value) {
      this.name = value
      this.$v.name.$touch()
    },
    setAge(value) {
      this.age = value
      this.$v.age.$touch()
    }
  }
}

html:

<div>
  <div class="form-group" :class="{ 'form-group--error': $v.name.$error }">
    <label class="form__label">Name</label>
    <input class="form__input" v-model.trim="name" 
@input="setName($event.target.value)"/>
  </div>
  <div class="error" v-if="!$v.name.required">Field is required</div>
  <div class="error" v-if="!$v.name.minLength">Name must have at least 
{{$v.name.$params.minLength.min}} letters.</div>
  <div class="form-group" :class="{ 'form-group--error': $v.age.$error }">
    <label class="form__label">Age</label>
    <input class="form__input" :value="age" @change="setAge($event.target.value)"/>
  </div>
  <div class="error" v-if="!$v.age.between">Must be between {{$v.age.$params.between.min}} and {{$v.age.$params.between.max}}</div><span tabindex="0">Blur to see changes</span>
</div>
Continue Reading

Only step into our files when debugging in Chrome Developer tools.

A lot of times when we are debugging our front end javascript code using Chrome Developer tools,

the system steps into other files. To avoid this, we can ask the debugger to ignore these files by “blackboxing” them. To do this, right click on the file and click “blackbox script”

To get to the blackboxed files, go to the “settings” section by clicking on the symbol as shown below or press F1.

The “blackboxing” tab shows all the files that have been blackboxed.

Continue Reading