Vue.js doesn't update value if I use an object in another object for select option

Question

I have an array of posts and each post has a user. I also have a select field where I can change the post's user. However only the user's id updates on the page and not the username itself. How could I have both of them update and reflect the change?

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 user for this post is:
    {{ post.user.id }} <!-- this changes -->
    {{ post.user.username }} <!-- this does not -->

    Change the post's user:
    <select v-model="post.user.id">
        <option v-for="user in users" :value="user.id">{{ user.username }}</option>
    </select>
</div>

Fab · Accepted Answer · 2019-02-14 09:27:19Z

4

You could use the user object as v-model, and the same for options values. Like this:

<select v-model="post.user">
    <option v-for="user in users" :value="user">{{ user.username }}</option>
</select>

answered Feb 14, 2019 at 9:27

Fab

4,6572 gold badges26 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue.js doesn't update value if I use an object in another object for select option

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related