Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <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 :src="item.image" alt="" class="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>
- </li>
- </ul>
- </template>
- <script>
- export default {
- 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>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement