javascript - 如何在 Vue.js 中创建/加载的组件/页面上显示模式
问题描述
我是 Vue.js 的新手,我在模态中挣扎。我想在用户导航到某个组件时首先加载模式窗口。我尝试创建一些示例模式,如果我单击按钮并触发它会打开$('#modalId').modal('show')
。但是当我尝试从 Vue 执行相同的命令时,created () {...}
它不会打开模式窗口。我不想通过单击按钮打开模式窗口,我想在页面/组件加载时打开。
<!-- This works fine -->
<button class="btn btn-dark" @click="openModal" data-target="#loginModal">Open modal</button>
<!-- MODAL -->
<div class="modal" ref="modal" id="loginModal" data-keyboard="false" data-backdrop="static">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Insert required data</h5>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="username">Username</label>
<input type="text" class="form-control">
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-primary" data-dismiss="modal">Submit</button>
<a href="#" @click="logout" data-dismiss="modal">
<span>{{ $t('pages.userIconInHeader.signOut') }}</span>
</a>
</div>
</div>
</div>
</div>
...
export default {
name: 'test',
data () {
return {}
},
created () {
// HERE I WOULD LIKE TO OPEN MODAL. If it's even possible?
$(document).ready(function () {
this.openModal()
})
},
methods: {
openModal () {
$('#loginModal').modal('show')
},
...
解决方案
不要混合使用 jQuery 和 Vue。Vue 与 Virtual DOM 一起使用,您应该根据 Vue 文档更新、显示、隐藏元素,而不能使用 jQuery。这是一篇关于在 Vue 中创建模态的文章,希望对 https://alligator.io/vuejs/vue-modal-component/有所帮助
推荐阅读
- neo4j - 使用 Cypher 获取节点的端到端路径
- c# - c# mvc 确认邮件
- java - 如何在结束前停止方法
- android - 如何忽略 JobCancellationException?
- sql - 在下划线之间拉取子字符串数据
- java - Volley 中的 OnResponse 不允许使用 ArrayList
- c++ - 是否应该禁用 MSVC 的 C4138 警告(“'*/' found outside of comment”)?
- vue.js - 看一个 vuex 商店
- sql-server - SSIS 输出日期为 DD/MM/YYY 00:00:00
- python - Python 中的执行帧