PHP Classes

File: resources/assets/js/views/UserBoard.vue

Recommend this page to a friend!
  Classes of Hillary Kollan   Laravel eCommerce with Vue.js   resources/assets/js/views/UserBoard.vue   Download  
File: resources/assets/js/views/UserBoard.vue
Role: Auxiliary data
Content type: text/plain
Description: Auxiliary data
Class: Laravel eCommerce with Vue.js
Implementation of an interactive eCommerce site
Author: By
Last change:
Date: 2 years ago
Size: 2,558 bytes
 

Contents

Class file image Download
<template> <div> <div class="container-fluid hero-section d-flex align-content-center justify-content-center flex-wrap ml-auto"> <h2 class="title">All your orders</h2> </div> <div class="container"> <div class="row"> <div class="col-md-12"> <br> <div class="row"> <div class="col-md-4 product-box" v-for="(order,index) in orders" @key="index"> <img :src="order.product.image" :alt="order.product.name"> <h5><span v-html="order.product.name"></span><br> <span class="small-text text-muted">$ {{order.product.price}}</span> </h5> <hr> <span class="small-text text-muted">Quantity: {{order.quantity}} <span class="float-right">{{order.is_delivered == 1? "shipped!" : "not shipped"}}</span> </span> <br><br> <p><strong>Delivery address:</strong> <br>{{order.address}}</p> </div> </div> </div> </div> </div> </div> </template> <style scoped> .small-text { font-size: 14px; } .product-box { border: 1px solid #cccccc; padding: 10px 15px; } .hero-section { background: #ababab; height: 20vh; align-items: center; margin-bottom: 20px; margin-top: -20px; } .title { font-size: 60px; color: #ffffff; } </style> <script> export default { data() { return { user : null, orders : [] } }, beforeMount() { console.log("here"); this.user = JSON.parse(localStorage.getItem('sellify.user')); let headers = { "Content-Type": "application/json", "Authorization": 'Bearer ' + localStorage.getItem('sellify.jwt') }; // axios.defaults.headers.common['Content-Type'] = 'application/json' // axios.defaults.headers.common['Authorization'] = 'Bearer ' + localStorage.getItem('sellify.jwt'); fetch(`api/users/${this.user.id}/orders`,{headers:headers}).then(response => response.json()) .then( response =>{ this.orders = response } ) } } </script>