单击laravel vuejs中的按钮后如何隐藏bootstrap-vue模式

Posted 2023-02-22

【中文标题】单击laravel vuejs中的按钮后如何隐藏bootstrap-vue模式

【英文标题】：How to hide a bootstrap-vue modal after clicking a button in laravel vuejs

【发布时间】：2019-07-28 05:20:09

【问题描述】：

我是 laravel 和 vue.js 的新手。

在刀片视图中，我有一个 bootstrap-vue 模式，其中包括一个用于全文搜索的 vue.js 组件，并在单击按钮时向后端发送一个发布请求。

所以我想在执行请求后单击同一个按钮后隐藏此模式。

我尝试使用 ref 属性访问模态，然后调用文档here 中所述的 hide() 方法，但它不起作用，我不知道我错过了什么。

这是我的代码：

index.blade.php：

@extends('layouts.app', ['navId' => 'teams'])
@section('title', 'Teams')
@section('content')
    <div class="container-fluid mt-5 pt-5 col-10">
        <div class="row">
            <div class="col-3 offset-6">
                <b-button v-b-modal="'myModal'">Add Users</b-button>
                <!-- The modal -->
                <b-modal id="myModal" class="" size="s" centered :hide-footer="true" :hide-header="true">
                    <div class="row justify-content-center">
                        <h4 class="">Add new Participant</h4>
                    </div>
                    <user-search />
                </b-modal>
            </div>
        </div>
    </div>

@endsection

UserSearch.vue：

<template>
    <div class="" ref="myModalRef">
        <div class="card">
            <input type="text" placeholder="Search ..." v-model="keywords" v-on:keyup="autoComplete" 
                    class="form-control bg-light border-0">
            <div class="panel-footer mt-2" v-if="results.length">
                <ul class="list-unstyled">
                    <div class="result-item my-3">
                        <li class="media mx-2 my-3" v-for="result in results" :key="result.id" @mouseover="hover = true"
                                                        @mouseleave="hover = false"
                                                        :class=" active: hover ">
                            <img :src="result.avatar_path ? result.avatar_path : '/img/dashboard/user-placeholder.png'" 
                                    class="rounded-circle align-self-center mr-3"  />
                            <h5 v-text="result.name" class="mt-3"></h5>
                            <div class="media-body d-flex justify-content-end mt-3">
                                <b-form-checkbox :id="'selected-user' + result.id" v-model="usersToAdd" :value="result" class="" />
                            </div>
                        </li>
                    </div>
                </ul>
            </div>
        </div>

        <div v-if="usersToAdd.length" class="col-3 my-5 mx-auto">
            <b-button type="submit" @click="sendInviteToUsers">Done</b-button>
        </div>

    </div>

</template>
<script>
import bForm from 'bootstrap-vue/es/components/form/form';
import bFormGroup from 'bootstrap-vue/es/components/form-group/form-group';
import bFormInput from 'bootstrap-vue/es/components/form-input/form-input';

export default 
    name: 'UserSearch',
    data() 
        return 
            keywords: '',
            results: [],
            hover: false,
            usersToAdd: [],
        ;
    ,

    methods: 
        autoComplete() 
            this.results = [];
            if(this.keywords.length > 2 )
                this.$axios.get('/api/users/search',  params:  keywords: this.keywords  )
                .then(response => 
                    this.results = response.data;
                )
                .catch(() => 
                        this.loading = false;
                        this.showErrorToast('An error occurred while Fetching Users. Please try again later');
                );

                // .catch(error => );
            

        ,

        sendInviteToUsers() 
            if(this.usersToAdd.length) 
                this.$axios.post('/api/teams/invite-with-email/', this.usersToAdd);
            
        
    

</script>
<style scoped>

</style>

【参考方案1】：

您的代码的问题是 bootstrap-vue 无法正确找到模态引用。试试这样的方法，

从您的 index.blade.php 中删除 modal 并将其包含在 UserSearch.vue 中并带有 ref属性

index.blade.php

@extends('layouts.app', ['navId' => 'teams'])
@section('title', 'Teams')
@section('content')
    <div class="container-fluid mt-5 pt-5 col-10">
        <div class="row">
            <div class="col-3 offset-6">
                <b-button v-b-modal="'myModal'">Add Users</b-button>

                <!--Removed modal tag from here and included it in UserSearch.vue-->
                <user-search />

            </div>
        </div>
    </div>

@endsection

UserSearch.vue

<template>
    <!--Add b-modal tag and ref attribute here-->
    <b-modal id="myModal" class="" size="s" centered :hide-footer="true" :hide-header="true" ref="myModalRef">
    <div class="row justify-content-center">
        <h4 class="">Add new Participant</h4>
    </div>
    <div class="card">
        <input type="text" placeholder="Search ..." v-model="keywords" v-on:keyup="autoComplete"
               class="form-control bg-light border-0">
        <div class="panel-footer mt-2" v-if="results.length">
            <ul class="list-unstyled">
                <div class="result-item my-3">
                    <li class="media mx-2 my-3" v-for="result in results" :key="result.id" @mouseover="hover = true"
                        @mouseleave="hover = false"
                        :class=" active: hover ">
                        <img :src="result.avatar_path ? result.avatar_path : '/img/dashboard/user-placeholder.png'"
                             class="rounded-circle align-self-center mr-3"  />
                        <h5 v-text="result.name" class="mt-3"></h5>
                        <div class="media-body d-flex justify-content-end mt-3">
                            <b-form-checkbox :id="'selected-user' + result.id" v-model="usersToAdd" :value="result" class="" />
                        </div>
                    </li>
                </div>
            </ul>
        </div>
    </div>

    <div class="col-3 my-5 mx-auto">
        <b-button type="submit" @click="sendInviteToUsers">Done</b-button>
    </div>

</b-modal>

</template>
<script>
import bForm from 'bootstrap-vue/es/components/form/form';
import bFormGroup from 'bootstrap-vue/es/components/form-group/form-group';
import bFormInput from 'bootstrap-vue/es/components/form-input/form-input';

export default 
    name: 'UserSearch',
    data() 
        return 
            keywords: '',
            results: [],
            hover: false,
            usersToAdd: [],
        ;
    ,

    methods: 
        autoComplete() 
            this.results = [];
            if(this.keywords.length > 2 )
                this.$axios.get('/api/users/search',  params:  keywords: this.keywords  )
                .then(response => 
                    this.results = response.data;
                )
                .catch(() => 
                        this.loading = false;
                        this.showErrorToast('An error occurred while Fetching Users. Please try again later');
                );

                // .catch(error => );
            

        ,

        sendInviteToUsers() 
            if(this.usersToAdd.length) 
                this.$axios.post('/api/teams/invite-with-email/', this.usersToAdd).then(response => 
                    //Do something you want
                    this.$refs.myModalRef.hide();
                ).catch(error => 
                    //Handle the errors
                    this.$refs.myModalRef.hide();
                )
            

        
    

</script>
<style scoped>

</style>

在您的“sendInviteToUsers”函数中编辑上述函数。在这里，当您收到服务器的 api 响应后，模态将关闭。