bootstrapVue模态框不显示问题
bootstrap模态框不显示问题
点击按钮有反应但是不显示弹出内容
<template>
<div>
<h2 class="dome">图书馆管理系统h2>
<div>
<b-nav pills style="background-color:#545c64">
<b-nav-item href="/HomePage">系统首页b-nav-item>
<b-nav-item href="/HelloWorld">图书管理b-nav-item>
<b-nav-item>读者管理b-nav-item>
<b-nav-item>借归管理b-nav-item>
<b-nav-item>信息查询b-nav-item>
b-nav>
div>
<div>
<b-button v-b-modal.my-modal>新增读者b-button>
<b-modal id="my-modal" title="新增读者">
<b-form-input v-model="form.rid" type="text" placeholder="请输入条码号">b-form-input>
b-modal>
div>
<div>
<b-table-lite hover :items="items" :fields="fields">b-table-lite>
<script>
export default {
data() {
return {
fields:[
{key:'rid',label:'条码号'},
{key:'rname',label:'姓名'},
{key:'rtype',label:'职业'},
{key:'rcardtype',label:'证件'},
{key:'rcardid',label:'身份证号'},
{key:'rphone',label:'手机号'},
{key:'remail',label:'电子邮箱'}
],
items: [
{
rid: '202202220001',
rname: '张三',
rtype: '学生',
rcardtype: '学生证',
rcardid: '11111111111111',
rphone: '1222222222',
remail: '7xxxxxx@qq.com'
},
{
rid: '202202220002',
rname: '里斯',
rtype: '学生',
rcardtype: '学生证',
rcardid: '11111111111111',
rphone: '1222222222',
remail: '7xxxxxx@qq.com'
},
{
rid: '2022201',
rname: '王二',
rtype: '老师',
rcardtype: '教师证',
rcardid: '11111111111111',
rphone: '1222222222',
remail: '7xxxxxx@qq.com'
},
{
rid: '20150501',
rname: '高其',
rtype: '校长',
rcardtype: '教师证',
rcardid: '11111111111111',
rphone: '1222222222',
remail: '7xxxxxx@qq.com'
}
],
form:[{rid:''}]
}
}
}
script>
<style>
style>