How to show database info in Laravel Blade with VUE - php

Question

Sorry for the next question, Im really new on VUE.
I have a button on my blade, when I do it click I want to retrieve the info of the customer depend of the ID that get on my controller, I get the ID #3 and I click on CUSTOMER INFO Button, I want to see the info of this customer from the database
This is my function on my Controller CustomersController.php
public function showcustomers($idcustomer)
{
$Customers = Customers::find($idcustomer);
return view('showcustomer',
['Customers' => $Customers]);
}
And this is my button on Blade showcustomer.blade.php :
<div id="cita">
<div class="container-fluid">
<div class="container">
<div class="row">
<div class="col-xs-6">
<button v-on:click="showinfo = !showinfo" type="button" class="w3-btn w3-blue" style="width:100%">CUSTOMER INFO</button>
</div>
</div>
</div>
</div>
<br/><br/>
<div class="container align-content-between">
<div class="row text-center">
<div class="col-md-12 col-xl-12">
<information v-if="!showinfo"></information>
</div>
</div>
</div>
</div>
My app.js
Vue.component('information', require('./components/information.vue').default);
var app = new Vue({
el: '#cita',
data: {
showinfo: true,
}
});
And finally my information.vue
<template>
<div id="information">
<h4>Information {{ Customers.name }}</h4>
</div>
</template>
<script>
export default {
name: "information"
}
</script>
<style scoped>
</style>

Answer 1

Standard way of doing that is you will be implementing an ajax request where your front-end or Vue will fetch the necessary information from back-end via ajax request.
Another way of achieving that is you will be using properties or attributes in VUE
from your information.vue add a props maybe customerName or orderId or both
<template>
<div id="information">
<h4>Information {{ customerName }}</h4>
<h4>ID {{ orderID }}</h4>
</div>
</template>
<script>
export default {
props:["customerName","orderID"],
name: "information"
}
</script>
<style scoped>
</style>
in you showcustomer.blade.php you can pass the data from php to your vue by adding attributes based on the property name declared on you vue template
<information customer-name="John Mahu" order-id="0099812-ABC" v-if="!showinfo"></information>
or populate from your PHP variable
<information customer-name="{{ $Customers->customer_name }}" order-id="{$Customers->some_order_id}" v-if="!showinfo"></information>
Read more about vue props
https://v2.vuejs.org/v2/guide/components-props.html