Input - code helper

xxxxxxxxxx
 
<template>
  <MDBContainer class="m-5">
    // changed, without validationEvent prop
<MDBInput
    :minlength="5"
    required
    label="Label *"
    invalidFeedback="Label must be at least 5 characters long"
    validFeedback="OK!!"
    :disabled="loading"
    v-model="newTask.label"
    :isValid = "isInputValid"
    :isValidated = "isInputValidated"
    @input="handleInput"
/>
​
<hr class="my-5"/>
// with validationEvent prop
    
<MDBInput
    :minlength="5"
    validationEvent="input"
    required
    label="Label *"
    invalidFeedback="Label must be at least 5 characters long"
    :disabled="loading"
    v-model="newTask.label"
/>
 
    <hr class="my-5"/>
// or without minlength
<MDBInput
    validationEvent="input"
    required
    label="Label *"
    invalidFeedback="Add a label please."
    :disabled="loading"
    v-model="newTask.label"
/>
  </MDBContainer>
</template>

xxxxxxxxxx
 
<style>
#app {
  font-family: Roboto, Helvetica, Arial, sans-serif;
}
</style>

xxxxxxxxxx
 
<script>
  import { MDBInput, MDBContainer } from 'mdb-vue-ui-kit';
  import { ref } from 'vue';
​
  export default {
    components: {
      MDBInput, MDBContainer
    },
    setup() {
      const input1 = ref('');
      const loading = ref(false)
      
      const newTask = ref({
        label: ""
      })
      
      const isInputValid = ref(true)
      const isInputValidated = ref(false)
      
      const handleInput = (e) => {
        isInputValidated.value = true;
        isInputValid.value = e.target.checkValidity();
      }
​
      return {
        newTask, loading, handleInput, isInputValid, isInputValidated
      };
    },
  };
</script>

Console errors: 0