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">
            <modal :id="'note'+note.noteid+'editModal'" tabindex="-1" role="dialog" :aria-labelledby="'note'+note.noteid+'editModalLabel'">
                <h5 slot="header" class="modal-title" :id="'note'+note.noteid+'editModalLabel'">
                    Edit Note
                </h5>
                <div slot="body">
                    <div class="form-group">
                        <label for="content">Content</label>
                        <textarea :name="'content'+note.noteid" :id="'content'+note.noteid" class="form-control" v-model="note.thenote"></textarea>
                    </div>
                </div>
                <div slot="footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" @click="updateNote(note.noteid)">Save</button>
                </div>
            </modal>
            <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" data-toggle="modal" :data-target="'#note'+note.noteid+'editModal'"><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>