Como eu posso atualizar a table após fechar o modal utilizando Vue JS ?
No modal na qual estou trabalhando eu abro para mudar status para aprovado ou recusado(tabela veiculo), e quando clico no botão e ele fecha o modal e depois disso gostaria que a informação da tabela já seja alterada automaticamente como eu faço isso ?
---- Minha view
<template>
<div class="container-fluid">
<!-- Inicio Modal veiculo -->
<div class="modal fade" id="myModalcad" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" 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="exampleModalLabel">Detalhes do Veiculo</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form role="form" @submit.prevent="">
<div class="modal-body">
<div class="row">
<div class="form-group col-sm-6">
<label class="form-control-label" for="input-obra">Placa</label>
<div class="input-group input-group-alternative">
<input class="form-control form-control-alternative" type="text" name="placa" v-model="veiculo.placa" disabled>
</div>
</div>
<div class="form-group col-sm-6">
<label class="form-control-label" for="input-obra">Modelo</label>
<div class="input-group input-group-alternative">
<input class="form-control form-control-alternative" type="text" name="modelo" v-model="veiculo.modelo" disabled>
</div>
</div>
</div>
<div class="row">
<div class="form-group col-sm-6">
<label class="form-control-label" for="input-obra">Marca</label>
<div class="input-group input-group-alternative">
<input class="form-control form-control-alternative" type="text" name="marca" v-model="veiculo.marca" disabled>
</div>
</div>
<div class="form-group col-sm-6">
<label class="form-control-label" for="input-obra">Cor</label>
<div class="input-group input-group-alternative">
<input class="form-control form-control-alternative" type="text" name="cor" v-model="veiculo.cor" disabled>
</div>
</div>
</div>
<div class="row">
<div class="form-group col-sm-6">
<label class="form-control-label" for="input-obra">Tipo de Veiculo</label>
<div class="input-group input-group-alternative">
<input class="form-control form-control-alternative" type="text" name="tipo de veiculo" v-model="veiculo.tipoveiculo" disabled>
</div>
</div>
<div class="form-group col-sm-6">
<label class="form-control-label" for="input-obra">Operando</label>
<div class="input-group input-group-alternative">
<input class="form-control form-control-alternative" type="text" name="operando" v-model="veiculo.operando" disabled>
</div>
</div>
</div>
<div class="form-group">
<label class="form-control-label" for="input-obra">Arquivo</label>
<div class="input-group input-group-alternative">
<input class="form-control form-control-alternative" placeholder="arquivo *" type="text" name="url" v-model="veiculo.url" disabled>
</div>
</div>
</div>
</form>
<div class="row"></div>
<div class="modal-footer">
<button type="submit" @click="recusar(veiculo.id)" class="btn btn-danger" data-dismiss="modal">Recusar</button>
<button type="submit" @click="aprovar(veiculo.id)" class="btn btn-success" data-dismiss="modal">Aprovar</button>
</div>
</div>
</div>
</div>
<!-- Fim do Modal veiculo -->
<div class="col-sm-12">
<form role="form" @submit.prevent="">
<!-- Inicio Dados licenca -->
<div class="text-muted mb-3">
<h6 class="heading-small text-muted mb-4"><i class="fas fa-award mr-2" aria-hidden="true"></i>Dados de Licenca {{id}}</h6>
</div>
<div class="row">
<div class="form-group col-sm-4">
<label class="form-control-label" for="input-obra">Tipo de lincença</label>
<div class="input-group input-group-alternative">
<input class="form-control form-control-alternative" type="text" name="Tipo de lincença" v-model="licenca.tipolicenca"
disabled>
</div>
</div>
<div class="form-group col-sm-4">
<label class="form-control-label" for="input-obra">Orgão Expedidor</label>
<div class="input-group input-group-alternative">
<input class="form-control form-control-alternative" type="text" name="orgão Expedidor" v-model="licenca.orgaoExpedidor"
disabled>
</div>
</div>
<div class="form-group col-sm-4">
<label class="form-control-label" for="input-obra">Número da Licença</label>
<div class="input-group input-group-alternative">
<input class="form-control form-control-alternative" type="text" name="Número da Licença" v-model="licenca.numero"
disabled>
</div>
</div>
</div>
<div class="row">
<div class="form-group col-sm-4">
<label class="form-control-label" for="input-obra">Data de Expedição</label>
<div class="input-group input-group-alternative">
<input class="form-control form-control-alternative" type="text" name="Data de Expedição " v-model="licenca.dataExpedicao"
disabled>
</div>
</div>
<div class="form-group col-sm-4">
<label class="form-control-label" for="input-obra">Data de Validade</label>
<div class="input-group input-group-alternative">
<input class="form-control form-control-alternative" type="text" name="Data validade" v-model="licenca.dataValidade"
disabled>
</div>
</div>
<div class="form-group col-sm-4">
<label class="form-control-label" for="input-obra">Tipo de individuo</label>
<div class="input-group input-group-alternative">
<input class="form-control form-control-alternative" type="text" name="tipo de individuo" v-model="licenca.individuo_type"
disabled style="text-transform:capitalize">
</div>
</div>
</div>
<div class="row">
<div class="form-group col-sm-6">
<label class="form-control-label" for="input-obra">Arquivo</label>
<div class="input-group input-group-alternative">
<input class="form-control form-control-alternative" placeholder="arquivo *" type="text" name="arquivo" v-model="licenca.url"
disabled>
</div>
</div>
</div>
<!-- Fim Dados licenca -->
<hr>
<div class="text-muted mb-3">
<h6 class="heading-small text-muted mb-4"><i class="fas fa-map-marker-alt mr-2" aria-hidden="true"></i>Classes</h6>
</div>
<!-- Inicio Tab classes -->
<div class="row">
<div class="col">
<div class="card shadow">
<div class="table-responsive" style="min-height: 300px">
<table class="table align-items-center table-flush">
<thead class="thead-light">
<tr>
<th scope="col">Tipo Classe</th>
<th scope="col">Material</th>
</tr>
</thead>
<tbody>
<!-- Classes -->
<tr v-for="classe in classes">
<td>
{{classe.tipoClasse}}
</td>
<td>
{{classe.material}}
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- Fim Tab classes -->
<hr>
<div class="text-muted mb-3">
<h6 class="heading-small text-muted mb-4"><i class="fas fa-car mr-2" aria-hidden="true"></i>Veiculos</h6>
</div>
<!-- Inicio Tab veiculos -->
<div class="row">
<div class="col">
<div class="card shadow">
<div class="table-responsive" style="min-height: 200px">
<table class="table align-items-center table-flush">
<thead class="thead-light">
<tr>
<th scope="col">Placa</th>
<th scope="col">Modelo</th>
<th scope="col">Marca</th>
<th scope="col">Cor</th>
<th scope="col">Operando</th>
</tr>
</thead>
<tbody>
<!-- Veiculos -->
<tr v-for="veiculo in veiculos">
<th scope="row">
<div class="media align-items-center">
<div class="media-body">
<a class="mb-0 text-sm" @click="visualizarveiculo(veiculo.id)" data-toggle="modal" data-target="#myModalcad" href="#">{{veiculo.placa}}</a>
</div>
</div>
</th>
<td>
{{veiculo.modelo}}
</td>
<td>
{{veiculo.marca}}
</td>
<td>
{{veiculo.cor}}
</td>
<td>
{{veiculo.operando}}
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- Fim Tab veiculos -->
<div class="row justify-content-end">
<div class="text-center">
<button class="btn btn-primary mt-4" @click="voltar()" type="submit"><i class="fas fa-arrow-alt-circle-left mr-2"></i>Voltar</button>
</div>
</div>
</form>
</div>
</div>
</template>
<script>
import axios from 'axios'
export default {
props: ['id'],
data() {
return {
licenca: {
tipolicenca: '',
numero: '',
dataExpedicao: '',
dataValidade: '',
orgaoExpedidor: '',
url: '',
individuo_type: ''
},
veiculos: [],
classes: [],
veiculo: {
id: '',
placa: '',
modelo: '',
marca: '',
cor: '',
url: '',
operando: '',
tipoveiculo: ''
}
}
},
mounted() {
axios.get(`http://localhost:8000/api/relatorio/licenca/${this.id}/visualizar`, { headers: { "Authorization": "Bearer " + this.$store.state.usuario.token } })
.then(response => {
console.log(response)
this.licenca.tipolicenca = response.data.licenca.tipolicenca
this.licenca.numero = response.data.licenca.numero
this.licenca.dataExpedicao = response.data.licenca.dataExpedicao
this.licenca.dataValidade = response.data.licenca.dataValidade
this.licenca.orgaoExpedidor = response.data.licenca.orgaoExpedidor
this.licenca.url = response.data.licenca.url
this.licenca.individuo_type = response.data.licenca.individuo_type
this.veiculos = response.data.licenca.veiculos
this.classes = response.data.licenca.classes
})
.catch(e => {
console.log(e)
})
},
methods: {
visualizarveiculo(id) {
axios.get(`http://localhost:8000/api/relatorio/veiculos/${id}/visualizar`, { headers: { "Authorization": "Bearer " + this.$store.state.usuario.token } })
.then(response => {
console.log(response)
this.veiculo.id = response.data.veiculo.id
this.veiculo.placa = response.data.veiculo.placa
this.veiculo.modelo = response.data.veiculo.modelo
this.veiculo.marca = response.data.veiculo.marca
this.veiculo.cor = response.data.veiculo.cor
this.veiculo.url = response.data.veiculo.url
this.veiculo.operando = response.data.veiculo.operando
this.veiculo.tipoveiculo = response.data.veiculo.tipoveiculo
})
.catch(e => {
console.log(e)
})
},
aprovar(id) {
axios.get(`http://localhost:8000/api/relatorio/veiculos/${id}/aprovar`, { headers: { "Authorization": "Bearer " + this.$store.state.usuario.token } })
.then(response => {
console.log(response)
this.veiculo.operando = response.data.aprovado.operando
})
.catch(e => {
console.log(e)
})
},
recusar(id) {
axios.get(`http://localhost:8000/api/relatorio/veiculos/${id}/recusar`, { headers: { "Authorization": "Bearer " + this.$store.state.usuario.token } })
.then(response => {
console.log(response)
})
.catch(e => {
console.log(e)
})
},
voltar() {
this.$router.push('/principal/gestorlicencas');
}
}
}
</script>