Form Validation Error Fix
at AddPortfolio.vue:1:1
<script>
import { ref } from 'vue'
import { useAuthStore } from '@/stores/auth'
const form = ref()
const items = [
'Item 1',
'Item 2',
'Item 3',
'Item 4',
]
const title = ref('')
const description = ref('') // will contain HTML
const descriptionRules = ref([
(v: string) => !!v || 'Description is required',
])
const url = ref('')
const imageFile = ref(null)
const nameRules = ref([
(v: string) => !!v || 'Name is required',
(v: string) => (v && v.length <= 10) || 'Name must be 10 characters or less',
])
const urlRules = ref([
(v: string) => !!v || 'URL is required',
(v: string) => (v && v.length <= 10) || 'URL must be 10 characters or less',
])
const imageRules = ref([
(v: File) => !!v || 'Image is required',
(v: File) => v && v.size <= 1024 * 1024 || 'Image must be less than 1 MB',
])
const select = ref(null)
const checkbox = ref(false)
async function validate () {
const { valid } = await form.value.validate()
if (valid) alert('Form is valid')
}
function reset () {
form.value.reset()
}
function resetValidation () {
form.value.resetValidation()
}
const submit = async () => {
form.value.validate()
}
</script>Add Portfolio
Reset Form
chunk-U3LI7FBV.js?v=12b17e52:12153 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading '_withMods')means that something in your `AddPortfolio.vue` file is either **not properly registered**, **missing a component**, or **incorrectly bound** in the template.
### 🔍 Suspected Issue
The root cause is likely this line in your “:
const form = ref()You’re using this `form` as the `ref` for “ in your template:
<v-form @submit.prevent="submit" ref="form">But `ref()` needs to be initialized with `null` or a valid type — otherwise `form.value` might be `undefined` when Vue tries to access internal properties like `_withMods`.
### ✅ Fix: Initialize the ref with `null`
Update this line:
const form = ref()To:
const form = ref(null)This ensures Vue doesn’t try to access methods like `validate()` on `undefined`.
—
### Bonus Tip:
You should also `await` the `validate` call in your `submit` method:
const submit = async () => {
const { valid } = await form.value.validate()
if (valid) {
alert('Form is valid')
// proceed with submission
}
}Right now your `submit()` just calls `form.value.validate()` but doesn't check if the form is actually valid.
—
Let me know if you're using Vuetify 3 or some other version — I can tailor the advice even more.