0

我在使用 Laravel 7.3 + Vue 时有一个项目。

我正在尝试将公司分配给内部员工。当我单击“分配公司”按钮时，一切都很好，我可以在选择框中选择公司，但是当我现在单击“保存公司”按钮时，我可以在我的数据库中看到更改，但我没有看到在我的视图/模板中实时更改，我需要刷新网页以查看分配的公司。

这是我的 File.vue 之间的<template>：

 <td><h4 v-if="editEmpleado" class="text-black-50">{{EmpleadosInterno.empresa}}</h4>
    <select v-else class="form-control" id="Cliente" v-model="ClienteSeleccionado">
    <option v-for="Cliente in Clientes"
    :key="Cliente.id"
    :value="Cliente">{{Cliente.nombreempresa}}</option>
    </select>
    </td>
    <td>
    <a v-if="editEmpleado" type="button" class="btn btn-primary" v-on:click="onClickEdit()">
    Assign Company
    </a>
    <button v-else type="button" class="btn btn-success" v-on:click="onClickUpdate()">
    Save Company
</button>
</td>

这是我的剧本

export default {
    props: ['EmpleadosInterno'],
    data() {
        return {
            ClienteSeleccionado: {},
            Clientes: [],
            csrf: document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
            editEmpleado: true
        }
    },
    mounted() {
        axios.get('/Clientes').then((response) => {
                this.Clientes = response.data;
            },
        );
    },
    methods: {
        onClickEdit() {
            this.editEmpleado = false;
        },
        onClickUpdate() {
            const params = {
                nombreempresa: this.ClienteSeleccionado.nombreempresa
            }
            axios.put(`/EmpleadosInternos/${this.EmpleadosInterno.id}`, params).then((response) => {
                const EmpleadosInterno = response.data;
                this.$emit('update', EmpleadosInterno);
                this.editEmpleado = true;
            });
        },

这是我的 services.vue

 <div class="container">
        <div class="row justify-content-center text-center">
            <div class="col-md-12">
                <h2 class="text-primary">Empleados Registrados:</h2>
                <table class="table table-bordred table-striped ">
                    <thead>
                    <tr>
                        <th>Nombre</th>
                        <th>Telefono</th>
                        <th>Empresa</th>
                        <th>Acción</th>
                    </tr>
                    </thead>
                    <tbody>
                <empleadocomponente-component
                    v-for="(EmpleadosInterno, index) in EmpleadosInternos"
                    :key="EmpleadosInterno.id"
                    :EmpleadosInterno="EmpleadosInterno"
                    @update="updateEmpleadosInterno(index, ...arguments)"
                    @delete="deleteEmpleadosInterno(index)">
                </empleadocomponente-component>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
<script>
export default {
    data(){
        return {
            EmpleadosInternos: [],
        }
    },
    mounted() {
        axios.get('/EmpleadosInternos').then((response) => {
                this.EmpleadosInternos = response.data;
            },
        );
    },
    methods: {
        updateEmpleadosInterno(index, EmpleadosInterno){
            this.EmpleadosInternos[index] = EmpleadosInterno;
        },
        deleteEmpleadosInterno(index){
            this.EmpleadosInternos.splice(index, 1);
        }

    }
}
</script>
4

0 回答 0