Javascript 如果我使用另一个对象中的对象作为选择选项，则Vue.js不会更新值

我有一个帖子数组，每个帖子都有一个用户。我还有一个选择字段，可以在其中更改帖子的用户。但是，只有用户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

您可以将用户对象用作v-model，对于选项值也是如此。像这样：

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

您可以将用户对象用作v-model，对于选项值也是如此。像这样：

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