设置具有搜索功能的v-自动完成
设置具有搜索功能的v-自动完成
提问于 2019-07-07 08:10:00
在没有监视程序的情况下，试图设置v-自动完成，流程将是：
- 键入字符串，则值由函数接受。
- 函数在api中搜索字符串并返回一个列表。
- 列表被放入“条目”中
- 计算属性"tagsFound“被重新计算。
- 显示"tagsFound“(因为它们是
:items)，docs 这里和我的代码之间的主要区别是我试图在没有观察器的情况下这样做，而不是使用一个简单的函数。相关守则：
<v-autocomplete
v-model="newTag"
:items="tagsFound"
:loading="loading"
:search-input.sync="search"
color="white"
hide-no-data
hide-selected
:placeholder="$t('search_terms.new_tag')"
></v-autocomplete>
...
data() {
return {
newTag: '',
entries: [],
....
methods: {
...
async search(term){
this.query.term = term
this.entries = await this.searchTerms(this.query)
},
...
computed: {
tagsFound(){
return this.entries
}
}预期行为是搜索输入的术语，并将结果显示为下拉列表。实际行为是指它不进行搜索，因此不显示任何内容。
回答 2
Stack Overflow用户
回答已采纳
发布于 2019-07-07 11:30:16
sync修饰符有效地使道具的行为像v-model一样，所以就像v-model一样，有一个道具和一个事件。这个值需要是一个属性，而不是一个方法，所以如果:search-input.sync="search"是一个方法，那么search就没有意义。
示例中的tagsFound计算属性实际上没有执行任何操作。如果要返回entries，最好直接在模板中使用entries。
不知道为什么要在没有watch的情况下这样做，但可以通过将search-input.sync拆分成一个螺旋桨/事件对，或者使用带有getter和setter的计算属性来完成。下面的示例使用后一种方法。
function fakeServer (search) {
return new Promise(resolve => {
setTimeout(() => {
resolve([
'Red', 'Yellow', 'Green', 'Brown', 'Blue', 'Pink', 'Black'
].filter(c => c.toLowerCase().includes(search.toLowerCase())))
}, 1000)
})
}
new Vue({
el: '#app',
data () {
return {
newTag: '',
entries: [],
queryTerm: ''
}
},
computed: {
search: {
get () {
return this.queryTerm
},
set (searchInput) {
if (this.queryTerm !== searchInput) {
this.queryTerm = searchInput
this.loadEntries()
}
}
}
},
created () {
this.loadEntries()
},
methods: {
async loadEntries () {
this.entries = await fakeServer(this.queryTerm || '')
}
}
})<link href="https://unpkg.com/vuetify@1.5.16/dist/vuetify.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet">
<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
<script src="https://unpkg.com/vuetify@1.5.16/dist/vuetify.js"></script>
<div id="app">
<v-app>
<v-autocomplete
v-model="newTag"
:items="entries"
:search-input.sync="search"
></v-autocomplete>
</v-app>
</div>
Stack Overflow用户
发布于 2019-07-07 09:41:06
在本部分中，将search-input绑定到async方法，这是错误的。您需要将search-input绑定到数据字段并对其创建一个监视。
<v-autocomplete
:search-input.sync="search"
></v-autocomplete>定义组件如下：
data: function(){
return {
newTag: '',
entries: [],
searchInput: null
}
},
watch: {
searchInput(val){
this.entries = await this.searchTerms(val)
}
}和v-自动完成模板：
<v-autocomplete
v-model="newTag"
:items="tagsFound"
:loading="loading"
:search-input.sync="searchInput"
color="white"
hide-no-data
hide-selected
:placeholder="$t('search_terms.new_tag')"
></v-autocomplete>我在这是一个有用的例子。上创建的CodePen
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56920390
复制相关文章
相似问题
腾讯云开发者
