My inquiry is quite straightforward. I am exploring the official Vue documentation that delves into v-model arguments in relation to forms within a child component. Here is the code snippet I am referring to:
(App.Vue)
<script>
import UserName from './UserName.vue'
export default {
components: { UserName },
data() {
return {
firstLast: {
first: 'John',
last: 'Doe'
}
}
}
}
</script>
<template>
<h1>{{ firstLast.first }} {{ firstLast.last }}</h1>
<UserName
v-model:first-name="firstLast.first"
v-model:last-name="firstLast.last"
/>
</template>
(UserName.vue)
<script>
export default {
props: {
firstName: String,
lastName: String
},
emits: ['update:firstName', 'update:lastName']
}
</script>
<template>
<input
type="text"
:value="firstName"
@input="$emit('update:firstName', $event.target.value)"
/>
<input
type="text"
:value="lastName"
@input="$emit('update:lastName', $event.target.value)"
/>
</template>
The aforementioned files are functional! The name "John Doe" is displayed on screen, and any changes made in the inputs will reflect on the name value.
However, my concern lies in the fact that in UserName.vue, I am referencing individual variables, "first" and "last", whereas I would prefer to reference an object containing both properties together.
How can I accomplish this task?