vue.js - Vuetify 自动完成 - 如何传递默认值?
问题描述
我正在使用 Vuetify 自动完成组件,我希望它在其输入字段中显示默认值
我试图将值作为道具传递并将 v-model 字段更改为任何字符串,但它不起作用 - 输入字段为空,除非我从列表中选择值
<v-autocomplete
v-model="select"
:loading="loading"
:items="items"
:search-input.sync="search"
cache-items
class="mx-3"
flat
hide-no-data
hide-details
label="What state are you from?"
solo-inverted
></v-autocomplete>
new Vue({
el: '#app',
data () {
return {
loading: false,
items: [],
search: null,
select: 'Alabama',
states: [
'Alabama',
'Alaska',
'American Samoa',
'Arizona',
'Arkansas',
'California',
'Colorado',
]
}
},
watch: {
search (val) {
val && val !== this.select && this.querySelections(val)
}
},
methods: {
querySelections (v) {
this.loading = true
// Simulated ajax query
setTimeout(() => {
this.items = this.states.filter(e => {
return (e || '').toLowerCase().indexOf((v || '').toLowerCase()) > -1
})
this.loading = false
}, 500)
}
}
})
解决方案
该v-autocomplete
组件将不会显示“Alabama”,因为在 中找不到“Alabama” items
。您需要做的就是添加“Alabama”以items
使其最初有效:
data () {
return {
loading: false,
items: ['Alabama'], // <- add the default here
search: null,
select: 'Alabama',
states: [ ...
推荐阅读
- linux - 安装testdisk有问题
- python - 如何优化 OpenCV 中视频流的帧抓取?
- powershell - 将日期和时间字符串转换为日期时间
- json - 使用 VSCode 使用 openAPI/swagger 模式构建和验证 REST json 请求
- html - 用于显示更多/更少文本的非 JS、仅 CSS 技术,用于具有“n”个文本元素的页面
- php - 如何使用 PHP 连接到 MySQL 数据库并对其运行查询
- html - 如何隐藏图像文本后面的按钮并使它们在所有设备上保持在同一个位置?
- wordpress - 加入用户和用户元表 - WordPress
- django - 创建博客文章期间表单的异常行为
- c# - 如何创建新的命令行注册命令?