45 lines
1.3 KiB
Vue
45 lines
1.3 KiB
Vue
<template>
|
|
<div class="container p-4 mx-auto bg-gray-700">
|
|
<h1 class="text-center">My Notes</h1>
|
|
<input
|
|
id="search"
|
|
name="search"
|
|
class="block p-2 my-2 appearance-none w-full bg-transparent border-white-200 border-b focus:border-red-500"
|
|
placeholder="search"
|
|
aria-label="search"
|
|
/>
|
|
<div v-for="note in notes" :key="note.uuid">
|
|
<div class="flex justify-between items-center">
|
|
<router-link :to="'/notes/' + note.uuid" class="text-lg">{{
|
|
note.title
|
|
}}</router-link>
|
|
<div class="py-2">
|
|
<span
|
|
v-for="(tag, index) in note.tags"
|
|
:key="index"
|
|
class="inline-block text-sm bg-gray-500 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 ml-2"
|
|
>{{ tag }}</span
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapActions, mapState } from 'vuex'
|
|
|
|
export default {
|
|
name: 'Notes',
|
|
computed: {
|
|
...mapState('notes', ['notes', 'isInitialized']),
|
|
},
|
|
mounted() {
|
|
if (!this.isInitialized) this.load()
|
|
},
|
|
methods: {
|
|
...mapActions('notes', ['load']),
|
|
},
|
|
}
|
|
</script>
|