I'm currently working with an array of posts that includes a user for each post. I have a select field where I can change the user associated with a post. However, only the user's id updates on the page and not their username. Is there a way to ensure that both the id and username update and reflect the changes made?
data() {
return {
posts: [
{
id: 1,
post_body: 'hello world',
user: {
id: 45,
username: 'Johnny13'
}
},
{
id: 2,
post_body: 'what is up?',
user: {
id: 97,
username: 'Billly75'
}
}
],
users: [
{id: 45, username: 'Johnny13'},
{id: 97, username: 'Billly75'}
]
}
}
html
<div v-for="(post, index) in posts">
The current user for this post is:
{{ post.user.id }} <!-- this value can be changed -->
{{ post.user.username }} <!-- this does not get updated -->
Update the post's user:
<select v-model="post.user.id">
<option v-for="user in users" :value="user.id">{{ user.username }}</option>
</select>
</div>