<v-autocomplete
v-model="username"
:items="usernames"
item-text="name"
item-value="external_id"
@change="usernameChange"
@input.native="usernameInput"
style="width: 132px !important; font-family: arial !important"
class="input-field"
>
</v-autocomplete>
export default {
data(){
return {
username: "",
usernames: [],
}
},
methods:{
usernameInput(e) {
this.fetchAccounts(e.target._value);
},
usernameChange(username) {
//逻辑处理
},
fetchAccounts(username = "") {
return this.$http
.get(`/api/accounts?value=${username}`)
.delegateTo(api_request)
.then((res) => {
this.usernames = res.accounts.map((item) => {
item.name = item.login_name ;
return item;
});
this.usernames.unshift("全部");
})
.catch(({ code, message }) => {
throw `获取数据失败:${this.$t("api." + code)}, 额外信息: ${this.$t(
"api." + typeof message === "string"
? message
: JSON.stringify(message)
)}`;
})
.delegateTo(this.$snackbar.delegateError);
},
}
}
Vuetify——v-autocomplete
最新推荐文章于 2024-06-12 10:43:43 发布