62 lines
1.3 KiB
Vue
62 lines
1.3 KiB
Vue
<template>
|
|
<div>
|
|
<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"
|
|
v-bind:key="`${item.name} (${item.city})`" >
|
|
{{ item.name }} ({{ item.city }})
|
|
</li>
|
|
</ul>
|
|
<p v-else>{{ msg }}</p>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent } from 'vue'
|
|
import { Street, search as ivagoSearch } 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
|
|
}
|
|
|
|
ivagoSearch(this.query)
|
|
.then((res: Street[]) => {
|
|
this.items = res
|
|
this.msg = ''
|
|
})
|
|
}
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
#scroll-list {
|
|
height: 200px;
|
|
overflow: hidden;
|
|
overflow-y: auto;
|
|
}
|
|
</style>
|