asimryu

listitem.vue

May 12th, 2021
841
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <template>
  2.     <ul class="list-group">
  3.         <li class="list-group-item align-middle">
  4.         <input class="form-check-input align-middle me-2" type="checkbox" @change="updateCheck()" v-model="item.completed" aria-label="...">
  5.         <img :src="item.image" alt="" class="todo-photo align-middle me-2" :class="[item.image ? 'show' : 'hide']">
  6.         <span :class="[item.completed ? 'completed' : 'itemText']"> {{ item.name }} </span>
  7.         <button @click="removeItem()" class="btn btn-danger btn-sm float-end align-middle"><i class="fas fa-trash"></i></button>
  8.     </li>
  9.     </ul>
  10. </template>
  11. <script>
  12. export default {
  13.     props: ['item'],
  14.     methods: {
  15.         updateCheck() {    
  16.             console.log(localStorage.token);   
  17.             let headers = {
  18.                     'headers': {
  19.                         'Content-Type': 'application/json;charset=utf-8',
  20.                         'Accept': 'application/json',
  21.                         'Authorization': 'Bearer ' + localStorage.token                    
  22.                     }
  23.                 };         
  24.             axios.put('api/item/' + this.item.id, {
  25.                 item: this.item
  26.             }, headers)
  27.             .then( response => {
  28.                 if( response.status == 200 ) {
  29.                     this.$emit('itemchanged');
  30.                 }
  31.             })
  32.             .catch( error => {
  33.                 console.log( error );
  34.             } )
  35.         },
  36.         removeItem() {     
  37.             console.log(localStorage.token);
  38.             let headers = {
  39.                     'headers': {
  40.                         'Content-Type': 'application/json;charset=utf-8',
  41.                         'Accept': 'application/json',
  42.                         'Authorization': 'Bearer ' + localStorage.token                    
  43.                     }
  44.                 };
  45.             axios.post('api/item/' + this.item.id, {
  46.                 item: this.item,
  47.                 _method: "DELETE"
  48.             }, headers)
  49.             .then( response => {
  50.                 if( response.status == 200 ) {
  51.                     this.$emit('itemchanged');
  52.                 }
  53.             })
  54.             .catch( error => {
  55.                 console.log( error );
  56.             } )
  57.         }
  58.     }
  59.  
  60. }  
  61. </script>
  62. <style scoped>
  63.     .completed {
  64.         text-decoration: line-through;
  65.         color: #999999;
  66.     }
  67.     .itemText {
  68.         color: #00000;
  69.     }
  70.     .todo-photo {
  71.         border-radius: 50%;
  72.         border: 1px solid #888;
  73.         width: 50px;
  74.         height: 50px;
  75.     }
  76.     .hide { display: none; }
  77.     .show { display: inline; }
  78. </style>
RAW Paste Data