Question

我正在尝试从vue实例中打开一个bootstrap模式。

如果在函数中找到模态元素，该函数有效。但是，如果我将模态元素声明为实例外部或vue数据对象中的变量，则模态会被破坏（背景出现但我看不到模态）。

这是我的代码：

<div id="app">
  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title" id="myModalLabel">Modal title</h4>
        </div>
        <div class="modal-body">
          ...
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div>
    </div>
  </div>

  <button class="btn btn-default" data-target="#myModal" @click="makeNormalModal">Normal Modal</button>
  <button class="btn btn-danger" data-target="#myModal" @click="makeBrokenModal">Broken Modal</button>
</div>

和javascript：

let modalElement = $('#myModal');

const app = new Vue({
  el: '#app',
  data: {
    'modal': $('#myModal')
  },
  methods: {
    makeNormalModal() {
      let element = $(event.target);
      $('#myModal').modal('show');
    },
    makeBrokenModal() {
      this.modal.modal('show');
    }
  }
});

我创建了一个jsfiddle来显示问题。

Answer 1

您可以使用ref属性：

using Ninject;
using Ninject.Modules;

namespace v0.CrossCutting.Ninject
{
    public static class Container
    {
        private static IKernel Kernel;

        static Container()
        {
            INinjectModule[] NinjectModules = new INinjectModule[]
            {
                new Domain.Data.Model()
            };

            Kernel = new StandardKernel(NinjectModules);
        }

        public static TModel Resolve<TModel>()
        {
            try
            {
                return Kernel.Get<TModel>();
            }
            catch
            {
                throw;
            }
        }
    }
}

然后，通过$refs属性访问它：

<div class="modal fade" id="myModal" ref="modal">

更新了小提琴：https://jsfiddle.net/ukmnc4gs/4/

Answer 2

而不是$（'＃myModal'）在data对象中设置'#myModal'。

const app = new Vue({
  el: '#app',
  data: {
    'modal': '#myModal'
  },
  methods: {
      makeBrokenModal(event) {
        $(this.modal).modal('show')
      }
  }
});

当在vue实例之外定义模态时，Bootstrap模式不起作用

2 个答案: