PHP Classes

File: resources/assets/js/components/admin/ProductModal.vue

Recommend this page to a friend!
  Classes of Hillary Kollan   Laravel eCommerce with Vue.js   resources/assets/js/components/admin/ProductModal.vue   Download  
File: resources/assets/js/components/admin/ProductModal.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: 4,105 bytes
 

Contents

Class file image Download
<template> <!-- Modal --> <div class="modal fade" id="productModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLongTitle" name="header" v-html="data.name" ></h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body"> <div class="form-group"> <label for="exampleInputName">Name:</label> <input type="text" class="form-control" v-model="data.name" id="exampleInputName" placeholder="Enter name"> </div> <div class="form-group"> <label for="exampleInputUnits">Units:</label> <input type="text" class="form-control" v-model="data.units" id="exampleInputUnits" placeholder="Enter units"> </div> <div class="form-group"> <label for="exampleInputPrice">Price:</label> <input type="text" class="form-control" v-model="data.price" id="exampleInputPrice" placeholder="Enter price"> </div> <div class="form-group"> <label for="exampleFormControldescription">Description:</label> <textarea class="form-control" id="exampleFormControldescription" v-model="data.description" placeholder="Enter description" rows="3"></textarea> </div> <span > <div class="text-center"> <img :src="data.image" v-show="data.image != null" style="height:170px; width:150px;" class="rounded float-center" > <input type="file" id="file" name="image" class="flex" @change="attachFile"> </div> </span> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary" data-dismiss="modal" @click="uploadFile" >Save</button> </div> </div> </div> </div> </template> <script> export default { props: ['product'], data() { return { attachment: null, } }, computed: { data() { if (this.product != null) { return this.product }else{ return this.product // return { // name: null , // units: "" , // price: "" , // description: "", // image: "" // }; } } }, methods: { attachFile(event) { this.attachment = event.target.files[0]; }, uploadFile(event) { //console.log(this.product); if (this.attachment != null) { var formData = new FormData(); formData.append("image", this.attachment); let headers = {'Content-Type': 'multipart/form-data'}; axios.post("/api/upload-file", formData, {headers}).then(response => { let link = response.data.link; this.product.image = link; this.$emit('close', this.product) }) } else { this.$emit('close', this.product) } } } } </script>