Closing the modal after sending the data to the database - php

Question

I don't use pure vue in the app. I want to close the modal after sending the data to the database. I cannot close it for anything in the world by examining the divergence of the Internet. Can you help? :)
<div class="container-fluid">
<!-- DIRECT CHAT -->
<div class="card" id="form">
<!-- /.card-header -->
<div class="card-body">
<div class="row">
<!-- Button trigger modal -->
<button type="button" class="btn btn-success" data-toggle="modal" data-target="#exampleModal">
Dodaj budynek
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModal" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Dodawanie budynku</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
#csrf
#{{ info.data }}
<div class="modal-body">
<div class="form-group">
<label>Nazwa budynku <span class="red">*</span></label>
<input type="text" class="form-control" name="name" id="name" v-model="name">
<small>Nazwa identyfikująca budynek, np. ulica i numer budynku lub nazwa własna</small>
<small><div v-if="feedback">
<span style="color:red" v-text="feedback.name[0]" ></span>
</div></small>
</div>
<div class="form-group">
<label>Konto rozliczeniowe</label>
<input type="text" class="form-control" name="bank_account" id="bank_account" v-model="bank_account">
<small>Numer konta bankowego</small>
</div>
<div class="form-group">
<label>Opis</label>
<textarea class="form-control" rows="3" name="description" id="description" v-model="description"></textarea>
<small>Dodatkowe informacje, adnotacje, opis</small>
</div>
<small><span class="red">* pola obowiązkowe</span></small>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Anuluj</button>
<button type="submit" class="btn btn-success" #click="add">Zapisz</button>
</div>
</div>
</div>
</div>
</div>
<div class="row pt-2">
<table class="table table-striped">
<thead>
<tr>
<th scope="col" width="5%">#</th>
<th scope="col" width="25%">Nazwa <i class="fas fa-info-circle fa-sm" rel="tooltip" title="Nazwa pod którą identyfikowana jest zarządzana nieruchomość"></i></th>
<th scope="col" width="30%">Konto księgowe <i class="fas fa-info-circle fa-sm" rel="tooltip" title="Numer konta bankowego"></i></th>
<th scope="col" width="30%">Opis <i class="fas fa-info-circle fa-sm" rel="tooltip" title="Opis identyfikujący lub uzupełniający nazwę zarządzanej nieruchomości"></i></th>
<th width="5%"></th>
<th width="5%"></th>
</tr>
</thead>
<tbody>
<tr v-for="(list, index) in lists" :key="list.id">
<th scope="row">#{{ index + 1 }}</th>
<td>#{{ list.name }}</td>
<td>#{{ list.bank_account }}</td>
<td>#{{ list.description }}</td>
<td><button type="button" class="btn btn-info btn-sm"><i class="fas fa-pencil-alt"></i></button></td>
<td><button type="button" class="btn btn-danger btn-sm" #click="deleteData(list.id)"><i class="far fa-trash-alt"></i></button></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
I present script vue below. After running the add method, I would like to close the modal.
<script>
const app = new Vue({
el: '#form',
data () {
return {
feedback: '',
name: '',
bank_account: '',
description: '',
info: '',
lists: [],
}
},
mounted: function(){
this.show();
},
methods: {
show:function(list){
axios
.get('buildings/show', {
})
.then(({ data }) => (this.lists = data));
},
add () {
axios
.post('buildings/store', {
name: this.name,
bank_account: this.bank_account,
description: this.description,
})
.then(response => {
this.show();
this.name = '';
this.bank_account = '';
this.description = '';
this.info = response;
this.myModal.hide();
})
.catch(error => {
this.feedback = error.response.data.errors;
this.info = '';
})
},
deleteData:function(id){
axios
.post('buildings/destroy', {
id: id
})
.then(response => {
this.show();
})
.catch(error => {})
},
},
})
</script>
I wonder how to edit the code so that after calling the add method, the modal will close. I don't want to write in pure vue.js because I haven't grasped this topic yet.

Answer 1

I'm assuming you're using bootstrap modals here?
In your add() method you have this: this.myModal.hide(); but myModal is not defined anywhere.
In your modal html you can add a ref:
<div class="modal fade" ref="myModal" id="exampleModal">
Then you can use this to close the modal:
this.$refs.myModal.hide();

Answer 2

You can take little help of jquery if you already have it.
let currentOpenModel= jQuery('.modal.in').attr('id');
// modalID or undefined
jQuery('#' + currentOpenModel)?.modal('hide');