Блог

Я создаю веб-приложение CRUD с использованием Laravel/Vue.js впервые. Я использую базу данных MySQL, и я использовал много Vue.js компоненты, и каждый из них может обращаться к таблице в базе данных. Теперь мне нужно создать некоторые компоненты для получения данных от других компонентов, чтобы использовать их в выпадающем списке, но я не могу понять это.

Я пытался использовать props, но всегда получаю ошибки.

Это в дочернем 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:''                 
                    })
                }
            }  ,  
  

Это API:

 Route::apiResources([
'user' => 'APIUserController',
'fabriquant' => 'APIFabriquantController',
'machine' => 'APIMachineController',]);
  

Дочерний контроллер (родительский почти такой же):

     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 базы данных дочернего компонента (я надеюсь, вы поняли идею, ребята)

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">amp;times;</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>
  

Если я понимаю вашу основную проблему, вы могли бы использовать что-то вроде свойства экземпляра или файла javascript для хранения переменных в хранилище на стороне клиента.

Насколько я понимаю, вам нужен способ сначала получить данные из вашего 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? 🤔

                •   •   • 
            })
        }
    }, 
  

Я надеюсь, что это поможет вам или кому-то еще.