upccrt/resources/js/components/notes.vue

<template>
    <ul class="list-unstyled">
        <li class="row no-gutters mb-2" v-bind:key="note.noteid" v-for="note in this.notes">
            <div class="col-md-1 d-flex flex-column mx-md-3">
                <div class="text-center p-0 m-0">{{note.noteuser}}</div>
                <div class="text-muted text-small text-center p-0 m-0">{{getHRDate(note.notetime)}}</div>
                <div class="btn-group justify-content-center p-0 m-0">
                    <template v-if="authusername === note.noteuser || authusername === 'admin'">
                        <button class="btn btn-sm btn-primary m-1"><i class="fas fa-fw fa-edit"></i></button>
                        <button class="btn btn-sm btn-danger m-1"><i class="fas fa-fw fa-trash-alt"></i></button>
                        <button class="btn btn-sm btn-primary m-1"><i class="fa fa-fw fa-random"></i></button>
                    </template>
                </div>
            </div>
            <div class="col-md-10">
                <div class="card m-2">
                    <div class="card-body p-2">
                        {{ note.thenote }}
                    </div>
                </div>
            </div>
        </li>
    </ul>
</template>
<script>
import dateMixin from '../mixins/dateMixin'
export default {
    mixins:[dateMixin],
    props: ['initialnotes', 'authusername'],
    data () {
        return {
            notes: this.initialnotes,
        }
    }
}
</script>