Recently delving into the world of vue.js, I've been experimenting with creating a form using Vue, vuetify, and vuelidate. Oddly enough, when I don't wrap the v-text-field there are no issues, but as soon as I try to encapsulate it within components, trouble arises. The value fails to update, accompanied by a warning stating "[Vue warn] Set operation on key "model" failed: target is readonly."
You can observe this issue in action on the following sandbox :
https://codesandbox.io/s/distracted-newton-dx9p4s?file=/src/components/Form.vue
To further inspect the problematic code, refer to the snippet from Form.vue below:
<script setup>
import { reactive } from "vue";
import { useVuelidate } from "@vuelidate/core";
import { required } from "@vuelidate/validators";
import StyledInput from "./StyledInput.vue";
const formData = reactive({
username: "",
});
const rules = {
username: { required },
};
const v$ = useVuelidate(rules, formData);
</script>
<template>
<v-text-field
v-model="formData.username"
label="Username"
@input="v$.username.$touch;"
variant="outlined"
></v-text-field>
<div>{{ formData.username }}</div>
<StyledInput />
</template>
<style scoped>
</style>
If you're keen on exploring more variations, feel free to check out the sandbox link provided above. I'm struggling to pinpoint my error here, any insights would be greatly appreciated.
Thanks a bunch!