获取模态以在调用的 vue 方法中显示

Question

不确定这里发生了什么，但是当我单击调用函数的按钮时，它不会显示我的模式。

函数调用本身有效，因为如果我取消注释，注释掉的警告将会显示。我如何需要在此方法中显示模态？

控制台也没有错误

<button @click="eventClick"></button>
<div id="example-modal">
              <!-- Modal -->
              <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                <div class="modal-dialog" role="document">
                  <div class="modal-content">
                    <div class="modal-header">
                      <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                      </button>
                    </div>
                    <div class="modal-body">
                      hihi
                    </div>
                    <div class="modal-footer">
                      <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                      <button type="button" class="btn btn-primary">Save changes</button>
                    </div>
                  </div>
                </div>
              </div>
            </div>


eventClick: function(e) {
  var eventObj = e.event;

  //alert('Clicked ' + eventObj.title);
  let element = this.$refs.modal.$el;
  $(element).modal('show');

Answer 1

根据提供的代码很难判断。模态 ref 未定义。

通常，您真的不想将 JQuery 混入 Vue - 特别是当 JQuery 正在修改组件的状态时（在本例中为视觉状态：shown/not 所示）。

呈现模式的首选方式是使用标准 v-if，如 this example 所示。

获取模态以在调用的 vue 方法中显示

Getting modal to show within called vue method

javascript

modal-dialog

vue.js