时间戳

首页 > 解决方案 > VueJS + 一个组件中的两个 vForm 实例

vue.js - VueJS + 一个组件中的两个 vForm 实例

问题描述

我在前端使用 laravel + VueJS。我有一个组组件来处理组创建和组权限。我需要使用两种 vForm：一种用于创建组，另一种用于为组创建/分配权限。

问题是当我发送权限表单时，laravel 接收第一个表单的数据，我想这是因为我首先创建了该实例。我想我应该创建两个 vForm 实例，但我不知道如何。这可能吗？

我的组件代码：

<template>
    <div class="container">
        <div class="row mt-5">
          <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Grupos</h3>

                    <div class="card-tools">
                        <button class="btn btn-success" @click="newGroupModal" v-if="$can('groupscreate')"> <i class="fas fa-user-plus fa-fw"></i> Nuevo Grupo </button>
                    </div>

                </div>
              <!-- /.card-header -->
                <div class="card-body table-responsive p-0">
                    <table class="table table-hover">
                        <tbody>
                            <tr>
                                <th>ID</th>
                                <th>Nombre</th>
                                <th>Fecha Alta</th>
                                <th>Fecha Act</th>
                                <th>Acc.</th>
                            </tr>
                            <tr v-for="group in groups" :key="groups.id">
                                <td>{{ group.id }}</td>
                                <td>{{ group.name }}</td>
                                <td>{{ group.created_at | formattedDate }}</td>
                                <td>{{ group.updated_at | formattedDate }}</td>
                                <td><a href="#" @click="newEditGroupModal(group)"><i class="fas fa-edit"></i></a></td>
                                <td><a href="#" @click="newGroupPermissionsModal(group.id)"><i class="fas fa-key"></i></a></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
              <!-- /.card-body -->
            </div>
            <!-- /.card -->
          </div>
        </div>

        <!-- Modal -->
        <div class="modal fade" id="groupModal" tabindex="-1" role="dialog" aria-labelledby="groupModal" aria-hidden="true">
          <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="groupModal">Nuevo Grupo</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form @submit.prevent="editMode ? updateGroup() : createGroup()">
                    <div class="modal-body">
                        <div class="form-group">
                            <input v-model="form.name" type="text" name="name" placeholder="Name" 
                        class="form-control" :class="{ 'is-invalid': form.errors.has('name') }">
                            <has-error :form="form" field="name"></has-error>
                        </div>

                    </div>
                    <div class="modal-footer">
                        <button v-show="editMode" type="button" class="btn btn-danger" @click="deleteGroup" v-if="$can('groupsdelete')">Eliminar</button>
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
                        <button type="submit" class="btn btn-primary" v-if="$can('groupsedit')">Guardar</button>
                    </div>
                </form>  
            </div>
          </div>
        </div>

        <!-- Modal Permissions-->
        <div class="modal fade" id="groupPermissionsModal" tabindex="-1" role="dialog" aria-labelledby="groupPermissionsModal" aria-hidden="true">
          <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="userModal">Permisos por Grupo</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form @submit.prevent="updateGroupPermissions()">
                    <div class="modal-body">
                        <div class="form-group">
                            <label class="control-label">Usuarios</label><br>

                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="checkbox" id="usersview" value="usersview" v-model="groupPermissions">
                                <label class="form-check-label" for="usersview">Ver</label>
                            </div>

                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="checkbox" id="userscreate" value="userscreate" v-model="groupPermissions">
                                <label class="form-check-label" for="userscreate">Crear</label>
                            </div>

                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="checkbox" id="usersedit" value="usersedit" v-model="groupPermissions">
                                <label class="form-check-label" for="usersedit">Editar</label>
                            </div>

                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="checkbox" id="usersdelete" value="usersdelete" v-model="groupPermissions">
                                <label class="form-check-label" for="usersdelete">Eliminar</label>
                            </div> 
                        </div>

                        <div class="form-group">
                            <label class="control-label">Grupos</label><br>

                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="checkbox" id="groupsview" value="groupsview" v-model="groupPermissions">
                                <label class="form-check-label" for="groupsview">Ver</label>
                            </div>

                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="checkbox" id="groupscreate" value="groupscreate" v-model="groupPermissions">
                                <label class="form-check-label" for="groupscreate">Crear</label>
                            </div>

                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="checkbox" id="groupsedit" value="groupsedit" v-model="groupPermissions">
                                <label class="form-check-label" for="groupsedit">Editar</label>
                            </div>

                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="checkbox" id="groupsdelete" value="groupsdelete" v-model="groupPermissions">
                                <label class="form-check-label" for="groupsdelete">Eliminar</label>
                            </div> 
                        </div>                        
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
                        <button type="submit" class="btn btn-primary" v-if="$can('permissionsedit')">Guardar</button>
                    </div>
                </form>    
            </div>
          </div>
        </div>        
    </div>
</template>

<script>
    export default {
        data() {
            return {
                editMode: false,
                groups: {},
                groupPermissions: {},
                form: new Form({
                    id: '',
                    name : '',
                }),
                formPermissions: new Form({
                    users: [],
                    groups: []
                }),
            }
        },
        methods: {
            newGroupModal(){
                this.editMode = false;

                this.form.reset();

                $('#groupModal').modal('show');
            },

            newGroupPermissionsModal(groupId){

                this.loadGroupPermissions(groupId);

                this.form.reset();

                $('#groupPermissionsModal').modal('show');

                this.form.fill(this.groupPermissions);
            },            

            newEditGroupModal(group){

                this.editMode = true;

                this.form.reset();

                $('#groupModal').modal('show');

                this.form.fill(group);
            },

            loadGroups(){
                this.$Progress.start();

                axios.get('api/group').then(({data}) => (this.groups = data.data));

                this.$Progress.finish();
            },

            loadGroupPermissions(groupId){
                this.$Progress.start();

                axios.get('api/permissions/group/' + groupId).then(({data}) => (this.groupPermissions = data));

                this.$Progress.finish();
            },

            createGroup(){
                this.$Progress.start();

                this.form.post('api/group')
                .then(() => {

                    Fire.$emit('GroupInform');

                    $('#groupModal').modal('hide');

                    Toast.fire({
                      type: 'success',
                      title: 'Usuario creado satisfactoriamente.'
                    })

                    this.form.reset();

                    this.$Progress.finish();
                })
                .catch(() => {
                    this.$Progress.fail();
                })
            },

            updateGroup(groupId){
                this.$Progress.start();

                this.form.put('api/group/' + this.form.id)
                .then(() => {
                    Fire.$emit('GroupInform');

                    $('#groupModal').modal('hide');

                    Toast.fire({
                      type: 'success',
                      title: 'Usuario actualizado satisfactoriamente.'
                    })

                    this.form.reset();

                    this.$Progress.finish();
                })
                .catch(() => {
                    this.$Progress.fail();
                })
            },

            deleteGroup(){

                Swal.fire({
                    title: 'Estas seguro?',
                    text: "No podrás restaurar los datos eliminados.",
                    type: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#d33',
                    cancelButtonColor: '#14b750',
                    confirmButtonText: 'Si'
                    }).then((result) => {

                         if (result.value) {

                                this.form.delete('api/group/'+this.form.id).then(()=>{
                                        Toast.fire({
                                          type: 'success',
                                          title: 'Usuario eliminado satisfactoriamente.'
                                        })

                                    Fire.$emit('GroupInform');

                                    $('#groupModal').modal('hide');
                                }).catch(()=> {

                                    Swal.fire("Error!", "Algo anda mal.", "warning");
                                    this.$Progress.fail();

                                });
                         }
                })
            },

            updateGroupPermissions(){
                this.$Progress.start();

                this.form.post('api/permissions/group/1')
                .then(() => {
                    Fire.$emit('GroupInform');

                    $('#groupModal').modal('hide');

                    Toast.fire({
                      type: 'success',
                      title: 'Usuario actualizado satisfactoriamente.'
                    })

                    this.form.reset();

                    this.$Progress.finish();
                })
                .catch(() => {
                    this.$Progress.fail();
                })                
            }
        },
        mounted() {
            this.loadGroups();
            Fire.$on('GroupInform', () => {
                this.loadGroups();
            });
        }
    }
</script>

标签： vue.js

解决方案

只需添加一个名称不同于“form”的新变量作为来自 v-form 的新实例

form2: new Form({ id: '', name : '', })

然后像这样访问它：

<div class="form-group">
    <input v-model="form2.name" type="text" name="name" placeholder="Name" class="form-control" :class="{ 'is-invalid': form.errors.has('name') }">
    <has-error :form="form2" field="name"></has-error>
</div>

推荐阅读