Vue Router Tutorial: Part 2 (draft)
4 min readFeb 6, 2021
Creating Product Create Page
<template>
<b-container style="padding: 0px" ><b-form @submit.stop.prevent="handleSubmit(saveProduct)" style="margin: 0px;padding: 3vw; padding-top: 4vw; "><b-row align-h="center" align-v="center" style="background-color: #4AAD37; margin: 0px" class="text-white">
<b-col cols="auto" class="mr-auto p-1"><h4 >CreateProduct.vue</h4>
</b-col>
</b-row><b-row align-h="center" align-v="center" style="margin: 0px; background-color: #f8f9fa;padding: 15px"><b-col sm="6" >
<b-form-group id="input-group-name" label="Name" label-for="input-name">
<b-form-input
id="input-name"
name="input-name"
v-model="product.name"
aria-describedby="input-name-live-feedback"
></b-form-input></b-form-group><b-form-group id="input-group-brand" label="Name brand" label-for="input-brand">
<b-form-input
id="input-brand"
name="input-brand"
v-model="product.brand"
aria-describedby="input-brand-live-feedback"
></b-form-input></b-form-group><b-form-group id="input-group-info" label="Info" label-for="input-info">
<b-form-input
id="input-info"
name="input-info"
v-model="product.info"
aria-describedby="input-info-live-feedback"
></b-form-input>
</b-form-group></b-col>
</b-row>
</b-form><button type="button" class="btn btn-danger" @click="saveProduct">Confirmar</button></b-container></template>
<script>export default {
name: "ProductCreate",
components: {
},
data() {
return {
title: "Product Create",
loading: false,
product: {
name: null,
brand: null,
info: null,
},
}
},computed : {
prodTypes(){
// return ProductType.all() ;
},
},
created() {},
methods: {async saveProduct(){try {
this.loading = true;console.log("response : "+ JSON.stringify(result.response.data))
// this.$router.push({path: '/front/product/'+result.response.data.id});
} catch (e) {this.error = e.message
console.log(e)
} finally {
this.loading = false;
}},},
mounted () {
console.log("Mounted productCreate.vue");
}
};
</script>
<style>
</style>
Creating Product List Page
<template>
<b-container fluid style="padding: 0px; margin: 0px" ><h1>ListProduct.vue </h1><ProductSearch :prodTypeId="prodTypeId"
@changeProdType="changeProdType"
:isBiologic="isBiologic"
@changeIsBiologic="changeIsBiologic"
:withSearch="true"/><b-row v-if="products && products.length>0" cols="1" cols-sm="2" cols-md="3" cols-lg="4" style="margin: 0px;padding: 3vw; padding-top: 4vw" align-h="start"><b-col style=" color: black; padding: 0px" v-for="p in products" :key="p.id"><div>{{p}}</div>
<b-button @click="$router.push({name:'showProduct', params: { productId: p.id } })" variant="light" style=" border-color: #4AAD37 ;color: #4AAD37;margin-bottom: 10px ">Go to Show this prod</b-button></b-col></b-row></b-container>
</template>
<script>export default {
name: "ProductList",
components: {
},
data() {
return {
title: "ProductList",
products: null,};
},
computed : {
productsFiltered(){
console.log("productsFiltered");let bio = (this.isBiologic == 'true');
if(this.prodTypeId ){
console.log("with producttype id");
return Product.query().where('is_biologic',bio).with("typeProduct").whereHas('typeProduct', (query) =>{console.log("whereHas typeProduct ");
query.where('id',parseInt(this.prodTypeId));
}).get();
}else{
console.log("without producttype id");
console.log("this.isBiologicSelected :"+this.isBiologic);
return Product.query().where('is_biologic',bio).with("typeProduct").get();
}},
},
async created() {
console.log("Created ProductList");
this.fetch()},
methods: {
changeProdType(t){
console.log("in productlist change prodtype :"+JSON.stringify(t))
if(t){
console.log("in productlist change prodtype 1:"+JSON.stringify(t))
this.$router.push({query: {...this.$route.query, prodTypeId: t}});
}else{
console.log("in productlist change prodtype 2:"+JSON.stringify(t))
this.$router.push({query: {...this.$route.query,prodTypeId: null}});
}},
changeIsBiologic(b){
console.log("in productlist change isBiologic :"+JSON.stringify(b))
this.$router.push({query: {...this.$route.query, isBiologic: b}});
},
async fetch () {this.loading = truetry {
axios.get('http://testvue.test/api/products')
.then(response => (this.products = response.data))} catch (e) {
this.error = e.message
console.log(e)
} finally {this.loading = false
}
}
},
mounted () {
console.log("Mounted ProductList");}
};
</script>
With shearch bar white query ProductSearch.vue
<template><GreyRow ><b-col v-if="withSearch" cols="auto" align-v="center" style="margin: 5px; margin-left: 20px">
<h5>Search by :</h5>
</b-col>
<b-form inline style="margin: 5px">
<b-form-group id="input-group-prodType" label="Product Type:" label-for="input-prodType" ><b-form-select
style="margin-left: 10px"
id="input-prodType"
name="input-prodType"
v-model="prodTypeSelected"
aria-describedby="input-prodType-live-feedback"
@change="changeProdType">
<!-- @change="cropsFilter"> -->
<option :value="null" :selected="!prodTypeSelected">None</option>
<option v-for="prodType in prodTypes" :selected="prodTypeSelected == prodTypeId "
:key="prodType.id"
:value="prodType.id">
{{ prodType.name }}
</option>
</b-form-select></b-form-group><b-form-group class="mr-sm-2" id="input-group-isBiologic" label="Biologic:" label-for="input-isBiologic" >
<b-form-checkbox
id="isBiologic"
v-model="isBiologicSelected"
name="isBiologic"
@change="changeIsBiologic"
>
</b-form-checkbox>
</b-form-group></b-form><b-col style="text-align: right; ">
<b-button v-can="'product-create'" v-if="auth.mode" @click="$router.push({name: 'productCreate'})" style=" border-color: #4AAD37;background-color: #4AAD37; margin: 5px">Add new Product</b-button></b-col></GreyRow>
</template><script>import GreyRow from "@/wrapper/GreyRow"import Farm from '@/models/Farm'
import Terrain from '@/models/Terrain'
import Auth from '@/models/Auth'
import Plant from '@/models/Plant'
import Product from '@/models/Product'
import ProductComposition from '@/models/ProductComposition'
import ProductType from '@/models/ProductType'import $bus from '@/app';export default {
name: "ProductSearch",
components: {
GreyRow
},
// props: ['prodType','isBiologic','withSearch'],
props: ['prodTypeId','isBiologic','withSearch'],// plantSelected: { type: Object, default: null},
// farmSelected: { type: Object, default: null},// },
data() {
return {
prodTypeSelected: null,
isBiologicSelected: null,
};
},
watch: {
},
computed : {
// prodTypeSelected(){
// return ProductType.query().where('id',this.prodTypeId).get();
// },
// {
// get(){ return this.prodType },
// set(t){
// if(t != this.prodType){
// console.log("emit changeProdType")
// this.$emit('changeProdType', t)
// }
// }
// },
// isBiologicSelected: {
// get(){ return this.isBiologic },
// set(b){
// if(b != this.isBiologic){
// console.log("emit changeIsBiologic")
// this.$emit('changeIsBiologic', b)
// }
// }
// },
prodTypes(){
return ProductType.all() ;
},
farms(){
return Farm.all() ;
},
auth(){
return Auth.query().first();
},
},
created() {
console.log("on created Product search");
if(this.prodTypeId){
this.prodTypeSelected = this.prodTypeId;
}
this.isBiologicSelected = this.isBiologic;
},
methods: {
changeProdType(t){
console.log("value of t :" +JSON.stringify(t));
this.$emit('changeProdType', t)
},
changeIsBiologic(b){
console.log("value of b :" +JSON.stringify(b));
this.$emit('changeIsBiologic', b)
},
// testchange(){
// console.log("tesete change")
// },
// testinput(){
// console.log("tesete input")
// }
},
mounted () {console.log("Mounted ProductSearch.vue");},
};
</script><style>
</style>
Creating Product Show Page
Dynamic page /params
<template>
<b-container fluid style="padding: 0px; margin: 0px" ><!-- <PlantSearch v-if="!product.name" :withSearch="false"/> --><b-row style="margin: 0px;padding: 3vw; padding-top: 4vw" align-h="start"><ProductDetails :product="product" /></b-row></b-container>
</template>
<script>import ProductDetails from "@/components/Product/ProductDetails";export default {
name: "ProductShow",
components: {
ProductDetails,
},
props: ['productId'],
data() {
return {
title: "Product",
loading: false,
product: null,
};
},
watch: {},
computed : {
},
async created() {console.log("Created ProductShow");
this.fetch();
},
methods: {
async fetch () {this.loading = truetry {
axios.get('http://testvue.test/api/products/'+this.productId)
.then(response => (this.product = response.data))} catch (e) {
this.error = e.message
console.log(e)
} finally {// this.typePlantsFilter(1);
this.loading = false
}
}
},
mounted () {
console.log("Mounted ProductShow");}
};
</script><style>
</style>
Conclusion
Sorry for not have the time to finish the article, soon i will finish it..