Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <template>
- <div class="item">
- <input
- type="checkbox"
- @change="updateCheck()"
- v-model="item.completed"
- />
- <span :class="[item.completed ? 'completed' : 'itemText']"> {{ item.name }} </span>
- <button @click="removeItem()" class="trashcan">
- <font-awesome-icon icon="trash" />
- </button>
- </div>
- </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.delete('api/item/' + this.item.id, {
- item: this.item
- }, 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;
- width: 100%;
- }
- .itemText {
- width: 100%;
- color: #00000;
- }
- .item {
- display: flex;
- justify-content: center;
- align-items: center;
- }
- .trashcan {
- background: #e6e6e6;
- color: red;
- border: none;
- outline: none;
- }
- </style>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement