GUJ Discussões   :   últimos tópicos   |   categorias   |   GUJ Respostas

Como atualizar a table quando fecha o modal - Vue js

javascript
Tags: #<Tag:0x00007f1861c356b0>

#1

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">&times;</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>