After some exploration, I recently discovered that in Vue3, the v-model functionality does not work responsively or reactively with child Component.
The following code snippet showcases how the username data gets updated:
<template>
<div>
<input type="text" v-model="username" placeholder="Insert your username" />
<p>{{ username }}</p>
</div>
</template>
<script>
// Home.vue
export default {
name: 'Home',
data() {
return {
username: 'admin'
}
}
}
</script>
When text is entered into the input, the username data will also change accordingly.
However, when utilizing a Component as shown below:
<template>
<input type="text" :class="'input-text ' + additionalClass" :placeholder="placeholder" />
</template>
<script>
// InputText.vue
import { defineComponent } from "vue"
export default defineComponent({
name: 'InputText',
props: {
placeholder: {
type: String,
default: ''
},
additionalClass: {
type: String,
default: ''
}
}
})
</script>
I decided to update my code and incorporate the Component.
Please note that the Component has been successfully registered.
<template>
<div>
<input-text v-model="username" :placeholder="`Insert your username`" />
<p>{{ username }}</p>
</div>
</template>
<script>
// Home.vue
export default {
name: 'Home',
data() {
return {
username: 'admin'
}
}
}
</script>
Upon entering text, I noticed that the username data did not get updated, unlike the previous scenario. This issue led me to ponder if there exists a solution or at least a reference to what I am aiming to achieve.