CODEWITHSUNDEEP
vue.jstypesvuejs3vue-composition-apivue-script-setup
William Pineda MHA
William Pineda MHA

Reputation: 295

why do I get this error when I try to use multiple defineModels in vue.js?

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>

Upvotes: 3

Views: 1945

Answers (1)

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

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"

Upvotes: 6

Related Questions