Vue.js

Question

因此，在我的 Vue 实例中，我有一个 currentTask 模型，默认情况下为 null。

new Vue({
    el: '...',

    data: {
        currentTask: null
    }
});

当我单击具有 v-on="click: openTask" 指令的 'task-item' 时，我想使用 currentTask:

启动模式

methods: {
    openTask: function(e) {
        this.currentTask = this.clickedTask;
        $('#task-modal').modal('show');

        e.preventDefault();
    }
}

这工作得很好，虽然我不知道是否有更多 "magical" 方法来双向绑定整个模式 + 对 currentTask 的可见性。

现在，如果没有更好的方法来解决这个问题，我需要的是以某种方式侦听模态关闭事件，通常我们会在 jQuery 和 $('#myModal').on('hidden.bs.modal', function() {}); 中这样做Vue 并设置 this.currentTask = null;.

谢谢。

Answer 1

您或许可以使用 custom directive 来处理这个问题。

Vue.directive('task-selector', {
   bind: function () {
      var vm = this.vm;
      var el = $(this.el);
      el.on('hidden.bs.modal', function() {
         vm.data.currentTask = 'whatever value you want here';
      });
   },
   update: function (newValue, oldValue) {
      // i don't think you have anything here  
   },
   unbind: function () {
      // not sure that you have anything here
      // maybe unbind the modal if bootstrap has that
   }
})

在您的 html 中，您需要像这样将此指令放在模态元素上...

<div id="task-modal" v-task-selector>
   ... modal body stuff here...
</div>

Vue.js - "Bind" bootstrap 模态到 Vue 模型

Vue.js - "Bind" bootstrap modal to Vue model

javascript

jquery

twitter-bootstrap