PHP Classes

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

Recommend this page to a friend!
  Classes of Hillary Kollan  >  Laravel eCommerce with Vue.js  >  resources/assets/js/views/SingleProduct.vue  >  Download  
File: resources/assets/js/views/SingleProduct.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: 8 months ago
Size: 1,375 bytes
 

Contents

Class file image Download
<template>
    <div class="container">
        <div class="row">
            <div class="col-md-8 offset-md-2">
                <img :src="product.image" :alt="product.name">
                <h3 class="title" v-html="product.name"></h3>
                <p class="text-muted">{{product.description}}</p>
                <h4>
                    <span class="small-text text-muted float-left">$ {{product.price}}</span>
                    <span class="small-text float-right">Available Quantity: {{product.units}}</span>
                </h4>
                <br>
                <hr>
                <router-link :to="{ path: '/checkout?pid='+product.id }" class="col-md-4 btn btn-sm btn-primary float-right">Buy Now</router-link>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data(){
            return {
                product : []
            }
        },
        beforeMount(){
            let url = `/api/products/${this.$route.params.id}`
            //axios.get(url).then(response => this.product = response.data);

            fetch(url).then(res => res.json()).then(res =>{
                console.log(res);
                this.product = res.data;
            }).catch(err => console.log(err))
        }

    }
</script>

<style scoped>
    .small-text { font-size: 18px; }
    .title { font-size: 36px; }
</style>
For more information send a message to info at phpclasses dot org.