我是第一次使用Laravel / Vue.js构建CRUD Web应用程序。我正在使用MySQL数据库，并且使用了许多Vue.js组件，每个组件都可以访问数据库中的表。现在，我需要制作一些组件以从其他组件中获取数据以在下拉菜单中使用它，但我无法弄清楚。
我尝试使用道具，但总是会出错。
这在子提示中：
<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>
<script>
export default {
data(){
return{
editmode: false,
machines :{},
form: new Form({
id:'',
code:'',
nom: '',
type:'',
serie:'',
date:'',
fabnom:'',
section:'',
unite:''
})
}
} ,
这是api：
Route::apiResources([
'user' => 'API\UserController',
'fabriquant' => 'API\FabriquantController',
'machine' => 'API\MachineController',]);
子控制器（父对象几乎相同）：
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'];
}
}
编辑：您可以看到在子组件中有一个名为fabnom的字符串，在父组件中也有一个字符串：因此，现在我要说一句，我在父组件中添加了3个项目通过模态的数据库，每个项目在数据库中都有6列，其中之一称为fabnom，现在我传递到子组件页面，我打开了一个“ addNew”模型，并且有一个标记为fabnom的下拉框，其中应该有3个选项，我已经添加了一个，我选择了其中一个，这个值将存储在子组件数据库的fabnom列中（希望您能找到想法的人）：）
这是parent.vue（子对象看起来非常相似，唯一的区别在于，它的“ addNew”模型中也有一个下拉框，这已引起问题）：
<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>
<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();
});
}
}
谢谢
答案 0 :(得分：0)
如果我了解您的主要问题，则可以使用instance property或javascript文件之类的方法将变量保存在client-side storage中。
据我了解，您所需要的是一种首先使用一个组件从MySQL获取数据，然后在所有其他组件中使用该数据的方法。如果是这样，大约2个月前，我在当前的项目中就有这种需求。
唯一的问题是我不是使用Laravel / Vue，而是使用 Vue.js ， VueApollo 和 GraphQL 。虽然，我很确定-和希望-我解决问题的方式只会在语法上与您解决问题的方式有所不同。
我使用一个组件在用户登录后立即从用户那里查询一些信息。
Vue / Apollo查询
apollo: {
// Simple query that gets user info
me: {
query: gql` //GraphQL
{
me {
id
fullName
}
}
`,
loadingKey: "isLoading" //tracks results that are still loading.
}
}
然后，我想将用户的“全名”存储在某个位置，以便我的导航组件始终可以使用它。所以我创建了一个文件：
src / config / credentialStore.js
在此文件中，我创建了一个displayName变量，如下所示：
export const credentialStore = {
displayName: "",
userID: ""
};
在具有“我”查询的组件中，我使用一个函数对从查询返回的数据进行了结构分解。
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.
}
}
因此，您将执行类似的操作，然后可能执行以下操作：
<script>
export default {
data(){
return{
editmode: false,
fabriquants :{},
form: new Form({
id: this.$credentialStore.id,
fabnom:this.$credentialStore.fabnom, //what's a fabnom?
• • •
})
}
},
希望这对您或其他人有帮助。