52 lines
1.1 KiB
Vue
52 lines
1.1 KiB
Vue
<template>
|
|
<h1>Ivago</h1>
|
|
<input v-model="query" v-on:keyup.enter="search" type="text" placeholder="Street..." />
|
|
<div id="scroll-list">
|
|
<ul v-if="msg === ''">
|
|
<li v-for="item in items">{{ item.name }} ({{ item.city }})</li>
|
|
</ul>
|
|
<p v-else>{{ msg }}</p>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent } from 'vue'
|
|
import { Street, search as ivago_search } from '../api/ivago'
|
|
|
|
export default defineComponent({
|
|
name: 'Ivago',
|
|
data () {
|
|
return {
|
|
items: [] as Street[],
|
|
msg: '',
|
|
query: ''
|
|
}
|
|
},
|
|
methods: {
|
|
search () {
|
|
this.items = []
|
|
this.msg = 'Loading...'
|
|
|
|
if (this.query === '') {
|
|
this.msg = ''
|
|
return
|
|
}
|
|
|
|
ivago_search(this.query)
|
|
.then((res: Street[]) => {
|
|
this.items = res
|
|
this.msg = ''
|
|
})
|
|
}
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
#scroll-list {
|
|
height: 200px;
|
|
overflow: hidden;
|
|
overflow-y: auto;
|
|
}
|
|
</style>
|