将数据发送到数据库后关闭模式

Question

我没有在应用程序中使用纯 vue。我想在将数据发送到数据库后关闭模式。通过检查互联网的分歧，我无法为世界上的任何事情关闭它。你能帮我吗？ :)

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

我在下面展示脚本 vue。运行 add 方法后，我想关闭 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>

我想知道如何编辑代码，以便在调用 add 方法后，模态将关闭。我不想用纯vue.js写，因为我还没有掌握这个话题。

Answer 1

我假设您在这里使用引导模式？

在您的 add() 方法中，您有：this.myModal.hide(); 但 myModal 未在任何地方定义。

在您的模态 html 中，您可以添加一个 ref：

<div class="modal fade" ref="myModal" id="exampleModal">

然后你可以用这个来关闭模态：

this.$refs.myModal.hide();

Answer 2

如果你已经有了 jquery，你可以得到它的一点帮助。

let currentOpenModel= jQuery('.modal.in').attr('id'); 
// modalID or undefined
jQuery('#' + currentOpenModel)?.modal('hide');