[Vuejs]-VueJs emit('input') firing 2 values

0👍

In vue 3 v-model on a component is syntactic sugar for

<input-field
  :model-value="username"
  @update:model-value="username = $event"
></input-field>

so you’re input field component should be

<template>
  <div class="input-field">
    <input
      type="text"
      :value="modelValue"
      :id="inputId"
      placeholder=""
      @input="updateText"
    />
    <label :for="inputId">{{ label }}</label>
  </div>
</template>

<script>
import { ref } from "@vue/reactivity";
export default {
  name: "InputField",
  props: {
    ...
    modelValue: { type: String },
    ...
  },
  setup(props, { emit }) {
    const updateText = (e) => {
      emit("update:modelValue", e.target.value);
    };
    return {
      updateText,
    };
  },
};
</script>

Leave a comment