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>
- [Vuejs]-Vue stating that a property is undefined, when I clearly defined it
- [Vuejs]-Dynamically swapping a method of a button in vuejs based off of data
Source:stackexchange.com