listItem.vue

<template>
    <ul class="list-group">
        <li class="list-group-item align-middle">
            <input class="form-check-input align-middle me-2" type="checkbox" @change="updateCheck()" v-model="item.completed" aria-label="...">
            <img @click="toggler = !toggler" :src="item.image" alt="" class="image todo-photo align-middle me-2" :class="[item.image ? 'show' : 'hide']">
            <span :class="[item.completed ? 'completed' : 'itemText']"> {{ item.name }} </span>
            <button @click="removeItem()" class="btn btn-danger btn-sm float-end align-middle"><i class="fas fa-trash"></i></button>
            <FsLightbox :toggler="toggler" :sources="[item.image]" />
        </li>
    </ul>

</template>
<script>
import FsLightbox from "fslightbox-vue";
export default {
    components: { FsLightbox },
    data() {
        return {
            toggler: false
        }
    },
    props: ['item'],
    methods: {
        updateCheck() {
            console.log(localStorage.token);
            let headers = {
                    'headers': {
                        'Content-Type': 'application/json;charset=utf-8',
                        'Accept': 'application/json',
                        'Authorization': 'Bearer ' + localStorage.token
                    }
                };
            axios.put('api/item/' + this.item.id, {
                item: this.item
            }, headers)
            .then( response => {
                if( response.status == 200 ) {
                    this.$emit('itemchanged');
                }
            })
            .catch( error => {
                console.log( error );
            } )
        },
        removeItem() {
            console.log(localStorage.token);
            let headers = {
                    'headers': {
                        'Content-Type': 'application/json;charset=utf-8',
                        'Accept': 'application/json',
                        'Authorization': 'Bearer ' + localStorage.token
                    }
                };
            axios.post('api/item/' + this.item.id, {
                item: this.item,
                _method: "DELETE"
            }, headers)
            .then( response => {
                if( response.status == 200 ) {
                    this.$emit('itemchanged');
                }
            })
            .catch( error => {
                console.log( error );
            } )
        }
    }

}
</script>
<style scoped>
    .completed {
        text-decoration: line-through;
        color: #999999;
    }
    .itemText {
        color: #00000;
    }
    .todo-photo {
        border-radius: 50%;
        border: 1px solid #888;
        width: 50px;
        height: 50px;
    }
    .hide { display: none; }
    .show { display: inline; }
</style>