I created a Vue component with an input field and used v-model to bind data. Here is the code:
<template>
<div class="input-field">
<input
type="text"
v-model="value"
:id="inputId"
placeholder=""
@input="updateText"
/>
<label :for="inputId">{{ label }}</label>
</div>
</template>
<script>
import { ref } from "@vue/reactivity";
export default {
name: "InputField",
props: {
value: { type: String },
inputId: { type: String },
label: { type: String },
},
setup(props, { emit }) {
const value = ref("");
const updateText = () => {
emit("input", value.value);
};
return {
value,
updateText,
};
},
};
</script>
<style lang="less" scoped>
</style>
After using v-model in the parent component, I noticed that the value was not changing. When I console.log, I found two values being returned - one for the input value and another for the ref object.
<div class="login-box">
<InputField
v-model="username"
label="Username "
inputId="username"
@input="printUser"
/>
<input type="text" />
<div>{{ username }}</div>
If anyone has any insights or solutions, I would appreciate your help. Thank you!