在 Vue 中以编程方式更改自动完成所选项目答案

【问题标题】：Change autocomplete selected item programmatically in Vue在 Vue 中以编程方式更改自动完成所选项目
【发布时间】：2020-06-24 22:23:25
【问题描述】：

我不是 Vue 的高级，假设我们有：

<v-autocomplete v-model="defaultUser"
                :hint="`User: ${defaultUser.username}`"
                :items="users"
                :item-text="item =>`${item.firstName} - ${item.lastName}`"
                item-value="userId"
                label="Related user"
                persistent-hint
                return-object
                dense
                single-line outlined 
                :filter="userFilter"></v-autocomplete>

和data：

data: () => ({
    users: [],
    defaultUser: { userId: 0, username: 'select user', firstName: '', lastName: '' },
    .....

通过下面的代码在 UI 中没有发生任何事情，换句话说，我想通过代码更改所选项目但没有发生任何事情：

axios.get('api/user/relatedusers')
    .then(response => { 
        if (response.status === 200 && response.data.id !== 0) { 
            this.defaultUser.userId = response.data.relatedId;//Here is nothing happened 
        } 

    }).catch(err => { 
    });

如果每个变量都在 Vue 控制下，为什么这不起作用，我的意思是绑定和可观察的。

【问题讨论】：

“不起作用”是什么意思——如何？你确定那行代码正在执行吗？您所做的只是更改defaultUser 的用户ID，而不是更改整个defaultUser 对象；这可以解释为什么自动完成组件没有正确更新。

标签： javascript vue.js vue-component vuetify.js

【解决方案1】：

看来你应该通过id找到一个用户，然后将他分配给this.defaultUser：

this.defaultUser = this.users.find(x => x.userId === response.data.relatedId)

【讨论】：