组件自动完成VueJS
组件自动完成VueJS
提问于 2018-06-08 03:48:39
我想创建一个autocomplete组件，所以我有以下代码。
<Input v-model="form.autocomplete.input" @on-keyup="autocomplete" />
<ul>
<li @click="selected(item, $event)" v-for="item in form.autocomplete.res">
{{item.title}}
</li>
</ul>
autocomplete(e){
const event = e.path[2].childNodes[4]
if(this.form.autocomplete.input.length > 2){
this.Base.get('http://localhost:3080/post/search/post', {
params: {
q: this.form.autocomplete.input
}
})
.then(res => {
this.form.autocomplete.res = res.data
if(this.form.autocomplete.res.length > 0)
event.style.display = 'block'
})
}
},
selected(item, e){
this.form.autocomplete.item = item
console.log(e)
}但是，在主文件中选择我的项目后，如何获得退货？例如：
Home.vue
<Autocomplete :url="www.url.com/test" />当我从我的autocomplete中选择我想要的项目时，我如何获得它的返回并将它存储在该文件中，就像我使用v-model一样
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-06-08 04:56:54
正如Vue Guide所说：
虽然有点神奇，但v-model本质上是语法糖，用于更新用户输入事件的数据，以及对某些边缘情况的特别关注。
然后在Vue Using v-model in Components，
组件内的
<input>必须：
将value属性绑定到输入上的value prop，用新值发出它自己的自定义输入事件
然后按照上面的指南，一个简单的演示将如下所示：
Vue.config.productionTip = false
Vue.component('child', {
template: `<div>
<input :value="value" @input="autocomplete($event)"/>
<ul v-show="dict && dict.length > 0">
<li @click="selected(item)" v-for="item in dict">
{{item.title}}
</li>
</ul>
</div>`,
props: ['value'],
data() {
return {
dict: [],
timeoutControl: null
}
},
methods: {
autocomplete(e){
/*
const event = e.path[2].childNodes[4]
if(this.form.autocomplete.input.length > 2){
this.Base.get('http://localhost:3080/post/search/post', {
params: {
q: this.form.autocomplete.input
}
})
.then(res => {
this.form.autocomplete.res = res.data
if(this.form.autocomplete.res.length > 0)
event.style.display = 'block'
})
}*/
clearTimeout(this.timeoutControl)
this.timeoutControl = setTimeout(()=>{
this.dict = [{title:'abc'}, {title:'cde'}]
}, 1000)
this.$emit('input', e.target.value)
},
selected(item){
this.selectedValue = item.title
this.$emit('input', item.title)
}
}
})
new Vue({
el: '#app',
data() {
return {
testArray: ['', '']
}
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app">
<child v-model="testArray[0]"></child>
<child v-model="testArray[1]"></child>
<div>Output: {{testArray}}</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50749176
复制相关文章
相似问题