49 lines
1.2 KiB
Vue
49 lines
1.2 KiB
Vue
<template>
|
|
<v-container fluid>
|
|
<v-row dense align-content="stretch" align="stretch">
|
|
<v-col
|
|
v-for="(note, index) in notes"
|
|
:key="index"
|
|
cols="12"
|
|
sm="6"
|
|
md="4"
|
|
xl="3"
|
|
class="viewer"
|
|
>
|
|
<v-hover v-slot:default="{ hover }">
|
|
<Note
|
|
:hover="hover"
|
|
:title="note.title"
|
|
:tags="note.tags"
|
|
:updated-at="format(note.updatedAt)"
|
|
>
|
|
{{ note.content }}
|
|
</Note>
|
|
</v-hover>
|
|
</v-col>
|
|
</v-row>
|
|
|
|
<v-btn to="/create" fab fixed bottom right large color="accent">
|
|
<v-icon>mdi-plus</v-icon>
|
|
</v-btn>
|
|
</v-container>
|
|
</template>
|
|
|
|
<script>
|
|
import { format } from 'timeago.js'
|
|
import Note from '@/components/Note'
|
|
|
|
export default {
|
|
name: 'Notes',
|
|
title: 'Notes',
|
|
components: { Note },
|
|
data: () => ({
|
|
notes: [],
|
|
}),
|
|
mounted() {
|
|
this.$axios.get('/notes').then((e) => (this.notes = e.data))
|
|
},
|
|
methods: { format },
|
|
}
|
|
</script>
|