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