Question

我有一系列帖子，每个帖子都有一个用户。我还有一个选择字段，可以在其中更改帖子的用户。但是，只会在页面上更新用户的ID，而不会更新用户名本身。我如何才能同时更新和反映变化？

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>

Answer 1

您可以将user对象用作v-model，对于选项值也可以使用相同的对象。像这样：

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

如果我将另一个对象中的一个对象用于选择选项，Vue.js不会更新值

1 个答案: