34 lines
811 B
Vue
34 lines
811 B
Vue
<template>
|
|
<div class="main-container">
|
|
<div class="heading">
|
|
<h1>
|
|
Willkommen in der Adressverwaltung
|
|
</h1>
|
|
</div>
|
|
<div class="content">
|
|
<input v-model="input" type="text" placeholder="Suche...">
|
|
<div v-for="adresses in filteredList()" :key="adresses" class="adresses">
|
|
<p>{{ adresses }}</p>
|
|
</div>
|
|
<div v-if="input&&!filteredList().length" class="item error">
|
|
<p>Nicht gefunden</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue'
|
|
|
|
const input = ref('')
|
|
const adresses = ['Hedemann', 'Nietiedt', 'Schoon']
|
|
function filteredList () {
|
|
return adresses.filter(adresses =>
|
|
adresses.toLowerCase().includes(input.value.toLowerCase())
|
|
)
|
|
}
|
|
</script>
|
|
|
|
<style scoped src="@/assets/main.css">
|
|
</style>
|