在调用的 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 正在修改组件的状态时（在这种情况下，视觉状态：显示/未显示）。呈现模式的首选方法是使用标准v-if，如本例所示。