Javascript Vue.js-“;绑定";Vue模型的bootstrap模型

Javascript Vue.js-“;绑定";Vue模型的bootstrap模型,javascript,jquery,twitter-bootstrap,vue.js,Javascript,Jquery,Twitter Bootstrap,Vue.js,因此,在我的Vue实例中,我有一个currentTask模型,默认为空 newvue({ el:“…”, 数据:{ 当前任务:空 } }); 当我单击具有v-on=“click:openTask”指令的“任务项”时,我想用当前任务启动模式: 方法:{ openTask:函数(e){ this.currentTask=this.clickedTask; $('任务模式').model('显示'); e、 预防默认值(); } } 这很好,尽管我不知道是否有更“神奇”的方法将整个模态+可见性双向

因此,在我的Vue实例中,我有一个
currentTask
模型,默认为空

newvue({
el:“…”,
数据:{
当前任务:空
}
});
当我单击具有
v-on=“click:openTask”
指令的“任务项”时,我想用当前任务启动模式:

方法:{
openTask:函数(e){
this.currentTask=this.clickedTask;
$('任务模式').model('显示');
e、 预防默认值();
}
}
这很好,尽管我不知道是否有更“神奇”的方法将整个模态+可见性双向绑定到当前任务

现在,如果没有更好的方法,我需要的是以某种方式侦听模式关闭事件,这通常是我们在jQuery中使用
$('#myModal').on('hidden.bs.modal',function(){})执行的在Vue内部,并设置
this.currentTask=null

谢谢。

您可能可以使用一个解决方案

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>

... 模态身体的东西在这里。。。

它不起作用,我将尝试了解原因并发回。我还没有找到它不起作用的原因。我有一个
console.log('hello')在bind、update和unbind回调和none触发器中,所以我猜指令甚至没有被绑定。我在元素和Vue.directive('task-modal',{…
中执行了