Skip to content

Vuelidate – Sử dụng Component (Code Template)

Checkout : vuelidate

Installation

npm install @vuelidate/core @vuelidate/validators
// main.js
import { createApp } from 'vue'
import App from './App.vue'
import { VuelidatePlugin } from '@vuelidate/core'

const app = createApp(App)
app.use(VuelidatePlugin)
app.mount('#app')

Usage

<form>
  // text input
  <BaseInput
    type="text"
    id="input-name"
    :validator="$v.name"
    label="Name"
    v-model="$v.name.$model"
  />


  // number input
  <BaseInput
    type="text"
    id="input-quantity"
    :validator="$v.quantity"
    label="Quantity"
    v-model.number="$v.quantity.$model"
  />

  <button
    type="button"
    @click="submit"
    :disabled="$v.$errors.length"
  >
    {{ modalAttrs.title }}
  </button>
</form>
<script>
import { useProductModal } from "@/composables/product";
import { minValue, required, numeric, integer } from "@vuelidate/validators"
import $ from "jquery"

import { toRefs } from 'vue';
import BaseInput from '@/components/ui/BaseInput.vue';

export default {
  components: {
    BaseInput
  },
  mounted() {
    const vm = this; // phải dùng cái này
    $('#jungtin-modal').on('hidden.bs.modal', function (e) {
      vm.$v.$reset();
    })
  },
  validations() {
    return {
      name: { required },
      quantity: {
        required,
        minValue: minValue(1),
        integer
      },
      price: { 
        required,
        numeric,
        minValue: minValue(1000)
      }
    }
  },
  methods: {
    submit() {
      this.$v.$touch();
      if(!this.$v.$error)
        this.modalAttrs.clickEvent()
    }
  },
  setup() {
    /* Modal */
    const {
      /* State */
      modalData,
      /* Computed */
      modalAttrs,
      /* Method */
      openModal,
      createProductModal,
    } = useProductModal();

    const {
      name,
      description,
      price,
      quantity
    } = toRefs(modalData);


    

    return {
      /* Fields */
      name,
      description,
      price,
      quantity,

      modalAttrs,
      createProductModal,
    };
  },
};
</script>

BaseInput

<template>
  <div class="form-group">
    <label :for="id" class="col-form-label">{{ label }}:</label>
    <input
      :type="type"
      :id="id"
      :class="['form-control', {'is-invalid': validator.$error }]"
      
      :value="modelValue"
      @input="onInput"

    />

    <template v-for="(err, i) in validator.$errors" :key="i">
      <div class="invalid-feedback">*{{ err.$message }}</div>
    </template>
  </div>
</template>

<script>
import { integer } from '@vuelidate/validators';
export default {
    emits: ["update:modelValue"],
    props: {
        label: {
            type: String,
            required: true
        },
        id: {
            type: String,
            required: true
        },
        type: {
            type: String,
            required: true
        },
        validator: {
            type: Object,
            required: true
        },
        modelValue: {
            type: [String, Number]
        },
        modelModifiers: {
            default: () => ({}) // must have this, nếu không sẽ bị lỗi undefined cho .number
        }
    },
    methods: {
        onInput(event) {
            if(this.modelModifiers.number) {
                this.$emit('update:modelValue', Number(event.target.value))
            } else {
                this.$emit('update:modelValue', event.target.value)
            }
        }
    }
};
</script>

Chú ý kĩ phần v-model passing props & emits

Published inVuelidate

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *