Currently, I am developing a Vue front end for an application that necessitates storing all form data locally before sending it to the backend in case of any network connectivity issues. To achieve this, I am using Vuex to manage and retain all the necessary form data throughout the application, allowing it to be saved and retrieved from local storage as needed.
Another crucial aspect is form validation, for which my plan is to utilize the Vuelidate library. The documentation suggests that simply adding this.$v.touch() in the event function should enable me to use Vuelidate even without a v-model. However, after attempting this solution, it does not appear to be functioning as expected.
Below is an example of the code:
<template>
<form>
<input name="full-name" v-model="fullName" placeholder="Full Name" />
</form>
</template>
<script>
export default {
name: "AForm"
computed: {
fullName: {
get() { return this.$store.state.fullName }
set(name) {
this.$v.touch();
this.$store.dispatch("updateFullName", name);
},
}
},
validations: {
fullName: minLength(4);
}
}
</script>
Upon inspecting $v.fullName, I noticed that the value is simply showing as true. Furthermore, when examining the entire $v object, I observed that $anyDirty: false.