I am trying to use the v-model directive on two input elements. However, I am getting the following error: duplicate model name "modelValue". Below I show the code that generates this error:
Template:
<template>
<h2>Login</h2>
<form class="row mx-5" @submit.prevent="login">
<div class="col-12 col-md-6 form-field">
<label for="email" class="form-label">Correo</label>
<input type="text" class="form-control" id="email" v-model="email" placeholder="Ingrese el correo">
</div>
<div class="col-12 col-md-6 form-field">
<label for="password" class="form-label">Contraseña</label>
<input type="text" class="form-control" id="password" v-model="password" placeholder="Ingrese la contraseña">
</div>
<div class="col-12">
<button class="btn btn-primary">Login</button>
</div>
</form>
</template>
Script:
<script lang="ts" setup>
import { defineModel, onBeforeUpdate, } from "vue";
const email = defineModel();
const password = defineModel();
const login = (e: Event) => {
console.log(email.value, password.value);
};
</script>
defineModel is a macro used to make two-way binding for custom components, when they're used in parent, they could be bound using v-model, but in your case you need to define your state with simple refs :
<script lang="ts" setup>
import { ref, onBeforeUpdate, } from "vue";
const email = ref();
const password = ref();
const login = (e: Event) => {
console.log(email.value, password.value);
};
</script>
If you want to define a custom form component with defineModel, you should give them name as parameter :
defineModel('email') // in parent called v-model:email="email"
defineModel() // in parent v-model="name"