asimryu

addItemForm.vue

May 5th, 2021 (edited)
488
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <template>
  2.     <div class="item">
  3.         <input
  4.             type="checkbox"
  5.             @change="updateCheck()"
  6.             v-model="item.completed"
  7.             />
  8.         <span :class="[item.completed ? 'completed' : 'itemText']"> {{ item.name }} </span>
  9.         <button @click="removeItem()" class="trashcan">
  10.             <font-awesome-icon icon="trash" />
  11.         </button>
  12.     </div>
  13. </template>
  14. <script>
  15. export default {
  16.     props: ['item'],
  17.     methods: {
  18.         updateCheck() {    
  19.             console.log(localStorage.token);   
  20.             let headers = {
  21.                     'headers': {
  22.                         'Content-Type': 'application/json;charset=utf-8',
  23.                         'Accept': 'application/json',
  24.                         'Authorization': 'Bearer ' + localStorage.token                    
  25.                     }
  26.                 };         
  27.             axios.put('api/item/' + this.item.id, {
  28.                 item: this.item
  29.             }, headers)
  30.             .then( response => {
  31.                 if( response.status == 200 ) {
  32.                     this.$emit('itemchanged');
  33.                 }
  34.             })
  35.             .catch( error => {
  36.                 console.log( error );
  37.             } )
  38.         },
  39.         removeItem() {     
  40.             console.log(localStorage.token);
  41.             let headers = {
  42.                     'headers': {
  43.                         'Content-Type': 'application/json;charset=utf-8',
  44.                         'Accept': 'application/json',
  45.                         'Authorization': 'Bearer ' + localStorage.token                    
  46.                     }
  47.                 };
  48.             axios.delete('api/item/' + this.item.id, {
  49.                 item: this.item
  50.             }, headers)
  51.             .then( response => {
  52.                 if( response.status == 200 ) {
  53.                     this.$emit('itemchanged');
  54.                 }
  55.             })
  56.             .catch( error => {
  57.                 console.log( error );
  58.             } )
  59.         }
  60.     }
  61.  
  62. }  
  63. </script>
  64. <style scoped>
  65.     .completed {
  66.         text-decoration: line-through;
  67.         color: #999999;
  68.         width: 100%;
  69.     }
  70.     .itemText {
  71.         width: 100%;
  72.         color: #00000;
  73.     }
  74.     .item {
  75.         display: flex;
  76.         justify-content: center;
  77.         align-items: center;
  78.     }
  79.     .trashcan {
  80.         background: #e6e6e6;
  81.         color: red;
  82.         border: none;
  83.         outline: none;
  84.     }
  85. </style>
Add Comment
Please, Sign In to add comment