Laravel7.3+Vue项目v-if绑定数据更新后视图未实时刷新问题

问题根因 #

这个问题是Vue 2的响应式机制限制导致的：Vue 2无法监听到直接通过索引修改数组元素的操作，你在services.vue的updateEmpleadosInterno方法中使用this.EmpleadosInternos[index] = EmpleadosInterno赋值，虽然实际修改了数组内容，但不会触发视图的重新渲染，所以页面数据不会实时更新。

解决方法 #

修改services.vue里的updateEmpleadosInterno方法，任选以下一种方案即可：

方案1：使用Vue内置的$set方法触发响应式更新 #

updateEmpleadosInterno(index, EmpleadosInterno){
    this.$set(this.EmpleadosInternos, index, EmpleadosInterno);
}

方案2：使用数组splice方法替换元素（splice属于Vue可监听的数组原生方法） #

updateEmpleadosInterno(index, EmpleadosInterno){
    this.EmpleadosInternos.splice(index, 1, EmpleadosInterno);
}

可选优化（体验优化） #

你当前的File.vue点击编辑按钮后，下拉选择框默认是空值，可以在触发编辑时给选择器赋默认值，避免用户每次都要重新选择：
修改File.vue的onClickEdit方法：

onClickEdit() {
    // 匹配当前员工所属的公司作为下拉框默认值
    this.ClienteSeleccionado = this.Clientes.find(item => item.nombreempresa === this.EmpleadosInterno.empresa) || {}
    this.editEmpleado = false;
}

内容的提问来源于stack exchange，提问作者Beto A. Lien