laravel - Laravel + Vue V-IF 在数据库中更新但不在视图中
问题描述
我在使用 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>
解决方案
推荐阅读
- r - 将出生年份变量转换为R中的年龄变量
- php - 仅使用 php 计算项目总数
- javascript - Vue.js 点击事件适用于鼠标,但在点击笔记本电脑触控板时无效
- swift - 对数组关联类型的限制
- reactjs - 如何使用样式系统响应式道具
- java - 如何提供枚举字符串作为属性的值?
- tcp - 能否通过 TCP/IP 将 HID 鼠标的输入报告发送到另一台设备,以便远程控制该设备的鼠标?
- django - Django - 如何以及在何处按功能对自引用模型进行排序
- mongodb - MongoDB 中配置文件的 rs.slaveOk() 等价物是什么?
- numpy - 将 DICOM 图像转换为形状的 numpy 数组(s、3、256、256)