英文:
Vue2 Vuetify v-autocomplete: How do I get the searched result/filtered item of v-autocomplete
问题
Currently, select all will select all from the list which include filtered/un-filtered (screenshot: 67 item(s) selected although it has been filtered to 4). I need that select all to just select those 4 items (yellow box).
问题是如何获取/访问v-autocomplete的筛选项？
看到一个帖子几乎问了和我的问题一样的问题，但2019年没有答案。有人提到要使用
> this.$refs.autoCompleteRef.filteredItems
但这并不起作用。
英文:
I implement searching/filtering within v-autocomplete with multiple selection and select all.
Currently select all will select all from the list which include filtered/un-filtered (screenshot: 67 item(s) selected although it has been filtered to 4). I need that select all to just select those 4 items (yellow box).
Question is how do I get/access the v-autocomplete's filtered items?
Saw a post which asked almost same question as mine, but no answer from 2019. Someone mentioned to use
> this.$refs.autoCompleteRef.filteredItems
But its not working.
答案1
得分: 0
这是您提供的代码段的翻译：
它正如所述的那样运作。
请查看游乐场。最好在全屏模式下检查它。
新的 Vue({
vuetify: new Vuetify(),
el: '#app',
data () {
return {
model: null,
filter: '',
searchedItems: [],
states: [
'阿拉巴马州', '阿拉斯加州', '美属萨摩亚', '亚利桑那州',
'阿肯色州', '加利福尼亚州', '科罗拉多州', '康涅狄格州',
'特拉华州', '哥伦比亚特区', '密克罗尼西亚联邦',
'佛罗里达州', '乔治亚州', '关岛', '夏威夷州', '爱达荷州',
'伊利诺伊州', '印第安纳州', '衣阿华州', '堪萨斯州', '肯塔基州',
'路易斯安那州', '缅因州', '马绍尔群岛', '马里兰州',
'麻萨诸塞州', '密歇根州', '明尼苏达州', '密西西比州',
'密苏里州', '蒙大拿州', '内布拉斯加州', '内华达州',
'新罕布什尔州', '新泽西州', '新墨西哥州', '纽约州',
'北卡罗来纳州', '北达科他州', '北马里亚纳群岛', '俄亥俄州',
'俄克拉荷马州', '俄勒冈州', '帕劳', '宾夕法尼亚州', '波多黎各',
'罗德岛州', '南卡罗来纳州', '南达科他州', '田纳西州',
'德克萨斯州', '犹他州', '佛蒙特州', '维尔京群岛', '弗吉尼亚州',
'华盛顿州', '西弗吉尼亚州', '威斯康星州', '怀俄明州'
]
}
},
watch: {
filter() {
this.searchedItems = this.$refs['selectExample']?.filteredItems
}
}
})
#app { 行高：3; }
[v-cloak] { 显示：无; }
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet" />
<div id="app">
<v-app id="inspire">
<v-card>
<v-card-title class="headline font-weight-regular blue-grey white--text">个人资料</v-card-title>
<v-card-text>
搜索到的项目：{{ searchedItems }}
<v-subheader class="pa-0">你住在哪里？</v-subheader>
<v-autocomplete
v-model="model"
:items="states"
label="州"
:search-input.sync="filter"
ref="selectExample"
>
</v-autocomplete>
</v-card-text>
</v-card>
</v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
英文:
It works exactly as mentioned.
See the playground. It's better to check it in full-page mode.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
new Vue({
vuetify: new Vuetify(),
el: '#app',
data () {
return {
model: null,
filter: '',
searchedItems: [],
states: [
'Alabama', 'Alaska', 'American Samoa', 'Arizona',
'Arkansas', 'California', 'Colorado', 'Connecticut',
'Delaware', 'District of Columbia', 'Federated States of Micronesia',
'Florida', 'Georgia', 'Guam', 'Hawaii', 'Idaho',
'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky',
'Louisiana', 'Maine', 'Marshall Islands', 'Maryland',
'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi',
'Missouri', 'Montana', 'Nebraska', 'Nevada',
'New Hampshire', 'New Jersey', 'New Mexico', 'New York',
'North Carolina', 'North Dakota', 'Northern Mariana Islands', 'Ohio',
'Oklahoma', 'Oregon', 'Palau', 'Pennsylvania', 'Puerto Rico',
'Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee',
'Texas', 'Utah', 'Vermont', 'Virgin Island', 'Virginia',
'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'
]
}
},
watch: {
filter() {
this.searchedItems = this.$refs['selectExample']?.filteredItems
}
}
})
<!-- language: lang-css -->
#app { line-height: 3; }
[v-cloak] { display: none; }
<!-- language: lang-html -->
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet" />
<div id="app">
<v-app id="inspire">
<v-card>
<v-card-title class="headline font-weight-regular blue-grey white--text">Profile</v-card-title>
<v-card-text>
searchedItems: {{ searchedItems }}
<v-subheader class="pa-0">Where do you live?</v-subheader>
<v-autocomplete
v-model="model"
:items="states"
label="State"
:search-input.sync="filter"
ref="selectExample"
>
</v-autocomplete>
</v-card-text>
</v-card>
</v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论