Sharing data between all Vue.js components - laravel

Question

I'm building a CRUD web app using Laravel/Vue.js for the first time. I'm using a MySQL database and I used many Vue.js components, and each one can access a table in the database. Now I need to make some components to get data from other components to use it in a drop down, but I can't figure it out.
I tried using props but always get errors.
This is in the child vue:
<div class="form-group">
<select v-model="form.fabnom" type="text" name="fabnom" id="fabnom" class="form-control" :class="{ 'is-invalid': form.errors.has('fabnom') }">
<option v-for="fabriquant in fabriquants" :key="fabriquant.id" :value="fabriquant.fabnom">
</option>
</select>
<has-error :form="form" field="fabnom"></has-error>
</div>
<script>
export default {
data(){
return{
editmode: false,
machines :{},
form: new Form({
id:'',
code:'',
nom: '',
type:'',
serie:'',
date:'',
fabnom:'',
section:'',
unite:''
})
}
} ,
This is the API:
Route::apiResources([
'user' => 'API\UserController',
'fabriquant' => 'API\FabriquantController',
'machine' => 'API\MachineController',]);
Child controller(Parent one is nearly the same):
public function index()
{
//$this->authorize('isAdmin');
if (\Gate::allows('isAdmin')) {
return Machine::latest()->paginate(5);
}
}
public function store(Request $request)
{
$this->validate($request,[
'code' => 'required|string|max:191|unique:machines',
'nom' => 'required|string|max:191',
'type' => 'max:191',
'serie' => 'max:191',
'date' => 'max:191',
'fabnom' => 'max:191',
'section' => 'max:191',
'unite' => 'max:191',
]);
return Machine::create([
'code'=> $request['code'],
'nom'=> $request ['nom'],
'type'=> $request['type'],
'serie'=> $request['serie'],
'date'=> $request['date'],
'fabnom'=> $request['fabnom'],
'section'=> $request['section'],
'unite'=> $request['unite'],
]);
}
public function show($id)
{
//
}
public function update(Request $request, $id)
{
$machine = Machine::findOrFail($id);
$this->validate($request,[
'code' => 'required|string|max:191|unique:machines,code,'.$machine->id,
'nom' => 'max:191',
'type' => 'max:191',
'serie' => 'max:191',
'date' => 'max:191',
'fabnom' => 'max:191',
'section' => 'max:191',
'unite' => 'max:191',
]);
$machine->update($request->all());
return ['message' => 'Updated'];
}
public function destroy($id)
{
$machine = Machine::findOrFail($id);
// delete
$machine->delete();
return ['message' => 'Deleted'];
}
}
EDIT: You can see in the child component there is a string called fabnom and in the parent there is one also: so lets just say now I'm in the parent component and I added 3 items to its database via a modal each item has 6 columns in the database, one of them is called fabnom, now I passed to the child component page I opened an 'addNew' model and there is a dropdown box labeled fabnom which should have the 3 options that I already added I choose one of them and this value is going to be stored in the fabnom column of the database of the child component (I hope you get the idea guys)
This the parent.vue(The child one looks pretty the same the only difference that it has also a dropdown box in its 'addNew' model as mentioned up which is causing the problem):
<template>
<div class="container">
<div class="row mt-5" v-if="$gate.isAdmin()">
<div class="col-md-12">
<div class="card">
<div class="card-header">
<h3 class="card-title">Liste des Fabriquants</h3>
<div class="card-tools">
<button class="btn btn-success" #click="newModal">
Ajouter</button>
</div>
</div>
<!-- /.card-header -->
<div class="card-body table-responsive p-0">
<table class="table table-hover">
<tbody>
<tr>
<th>Nom</th>
<th>Adresse</th>
<th>Téléphone</th>
<th>Fax</th>
<th>E-mail</th>
</tr>
<tr v-for="fabriquant in fabriquants.data" :key="fabriquant.id">
<td>{{fabriquant.fabnom}}</td>
<td>{{fabriquant.adresse}}</td>
<td>{{fabriquant.tel}}</td>
<td>{{fabriquant.fax}}</td>
<td>{{fabriquant.email}}</td>
<td>
<a href="#" #click="editModal(fabriquant)">
<i class="fa fa-edit"></i>
</a>
/
<a href="#" #click="deleteFabriquant(fabriquant.id)">
<i class="fa fa-trash"></i>
</a>
</td>
</tr>
</tbody></table>
</div>
<!-- /.card-body -->
<div class="card-footer">
<pagination :data="fabriquants" #pagination-change-page="getResults"></pagination>
</div>
</div>
<!-- /.card -->
</div>
</div>
<div v-if="!$gate.isAdmin()">
<not-found></not-found>
</div>
<!-- Modal -->
<div class="modal fade" id="Ajouter" tabindex="-1" role="dialog" aria-labelledby="AjouterLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" v-show="!editmode" id="AjouterLabel">Ajouter</h5>
<h5 class="modal-title" v-show="editmode" id="AjouterLabel">Modifier</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form #submit.prevent="editmode ? updateFabriquant() : createFabriquant()">
<div class="modal-body">
<div class="form-group">
<input v-model="form.fabnom" type="text" name="fabnom"
placeholder="Nom"
class="form-control" :class="{ 'is-invalid': form.errors.has('fabnom') }">
<has-error :form="form" field="fabnom"></has-error>
</div>
<div class="form-group">
<input v-model="form.adresse" type="text" name="adresse"
placeholder="Adresse"
class="form-control" :class="{ 'is-invalid': form.errors.has('adresse') }">
<has-error :form="form" field="adresse"></has-error>
</div>
<div class="form-group">
<input v-model="form.tel" type="text" name="tel"
placeholder="Téléphone"
class="form-control" :class="{ 'is-invalid': form.errors.has('tel') }">
<has-error :form="form" field="tel"></has-error>
</div>
<div class="form-group">
<input v-model="form.fax" type="text" name="fax"
placeholder="Fax"
class="form-control" :class="{ 'is-invalid': form.errors.has('fax') }">
<has-error :form="form" field="fax"></has-error>
</div>
<div class="form-group">
<input v-model="form.email" type="email" name="email"
placeholder="E-mail"
class="form-control" :class="{ 'is-invalid': form.errors.has('email') }">
<has-error :form="form" field="email"></has-error>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Fermer</button>
<button v-show="editmode" type="submit" class="btn btn-success">Modifier</button>
<button v-show="!editmode" type="submit" class="btn btn-primary">Ajouter</button>
</div>
</form>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data(){
return{
editmode: false,
fabriquants :{},
form: new Form({
id:'',
fabnom:'',
adresse: '',
tel:'',
fax:'',
email:''
})
}
},
methods: {
getResults(page = 1) {
axios.get('api/fabriquant?page=' + page)
.then(response => {
this.fabriquants = response.data;
});
},
updateFabriquant(){
this.$Progress.start();
// console.log('Editing data');
this.form.put('api/fabriquant/'+this.form.id)
.then(() => {
// success
$('#Ajouter').modal('hide');
Swal.fire(
'Modifié!',
'Informations modifiés!',
'success'
)
this.$Progress.finish();
Fire.$emit('AfterCreate');
})
.catch(() => {
this.$Progress.fail();
});
},
editModal(fabriquant){
this.editmode = true;
this.form.reset();
$('#Ajouter').modal('show');
this.form.fill(fabriquant);
},
newModal(){
this.editmode = false;
this.form.reset();
$('#Ajouter').modal('show');
},
deleteFabriquant(id){
Swal.fire({
title: 'Voulez vous vraiment supprimer cet fabriquant?',
text: "You won't be able to revert this!",
type: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Oui, Supprimer!',
}).then((result) => {
// Send request to the server
if (result.value) {
this.form.delete('api/fabriquant/'+id).then(()=>{
Swal.fire(
'Supprimé!',
'Element supprimé.',
'success'
)
Fire.$emit('AfterCreate');
}).catch(()=> {
Swal.fire("Echec!", "Il y'a un problème.", "warning");
});
}
})
},
loadFabriquants(){
if(this.$gate.isAdmin()){
axios.get("api/fabriquant").then(({ data }) => (this.fabriquants = data));
}
},
createFabriquant(){
this.$Progress.start();
this.form.post('/api/fabriquant')
.then(()=>{
Fire.$emit('AfterCreate');
$('#Ajouter').modal('hide');
toast.fire({
type: 'success',
title: 'Fabriquant ajouté',
})
this.$Progress.finish();
})
.catch(()=>{
})
}
},
created() {
this.loadFabriquants();
Fire.$on('AfterCreate',()=>{
this.loadFabriquants();
});
}
}
</script>

Answer 1

If I understand your main issue, you could use something like an instance property or a javascript file to hold variables in client-side storage.
From what I understand, what you need is a way to first get data from your MySQL using one component, and then second, use that data in all the rest of your components. If so, I had this need with my current project about 2 months ago.
The only problem is that I'm not using Laravel/Vue but Vue.js, VueApollo, and GraphQL. Although, I'm pretty sure --and hope-- the way that I fixed my issue will only differ in syntax from the way you could solve yours.
I used a component to query some info from the user right after they log in.
Vue/Apollo Query
apollo: {
// Simple query that gets user info
me: {
query: gql` //GraphQL
{
me {
id
fullName
}
}
`,
loadingKey: "isLoading" //tracks results that are still loading.
}
}
Then I wanted to store the user's 'fullName' somewhere so that my navigation component could always use it. So I created a file:
src/config/credentialStore.js
In this file I created a displayName variable like this:
export const credentialStore = {
displayName: "",
userID: ""
};
Back in the component where I have the 'me' query, I destructured the data that was returned from the query with a function.
apollo: {
// Simple query that gets user info
me: {
query: gql`
{
me {
id
fullName
}
}
`,
loadingKey: "isLoading",
result({ data }) { //data is basically an object with the results of the query
this.$credentials.userId = data.me.id;
this.$credentials.displayName = data.me.fullName;
} //using this.$credentials.displayName will let me use that string from any component.
}
}
So you would do something like that and then maybe something like this:
<script>
export default {
data(){
return{
editmode: false,
fabriquants :{},
form: new Form({
id: this.$credentialStore.id,
fabnom:this.$credentialStore.fabnom, //what's a fabnom? 🤔
• • •
})
}
},
I hope this helps you or someone else.