Javascript 如何在Vue.js中创建/加载的组件/页面上显示模式

我是Vue.js的新手，很难使用modals。我想在用户导航到某个组件时首先加载模式窗口。我试图创建一些示例模态，如果我单击一个按钮并触发

$（'#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')
    },

...

开放模态
插入所需数据
用户名
提交
...
导出默认值{
名称：'测试'，
数据（）{
返回{}
},
创建（）{
//在这里我想打开模态。如果可能的话？
$（文档）.ready（函数（）{
这是openModal（）
})
},
方法：{
openModal（）{
$（'loginModal'）.modal（'show'））
},
...

在不带

$（文档）的
挂载的
中使用。就绪（函数（）{}）
：

在不带
$（文档）的
装入的
中使用。就绪（函数（）{}）
：

不要混合使用jQuery和Vue。Vue与虚拟DOM一起工作，您应该根据Vue文档更新、显示和隐藏元素，而不是使用jQuery。这是一篇关于在Vue中创建模式的文章，希望对您有所帮助
不要将jQuery和Vue混用。Vue与虚拟DOM配合使用，您应该根据Vue文档更新、显示和隐藏元素，而不是使用jQuery。这是一篇关于在Vue中创建模式的文章，希望对您有所帮助

mounted() {
  this.openModal();
},