Vue.js - “绑定”引导模式到 Vue 模型

Posted 2023-02-22

【中文标题】Vue.js - “绑定”引导模式到 Vue 模型

【英文标题】：Vue.js - "Bind" bootstrap modal to Vue model

【发布时间】：2015-11-05 05:23:54

【问题描述】：

所以，在我的 Vue 实例中，我有一个 currentTask 模型，默认为空。

new Vue(
    el: '...',

    data: 
        currentTask: null
    
);

当我单击具有v-on="click: openTask" 指令的“任务项”时，我想使用 currentTask 启动模式：

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

        e.preventDefault();
    

这工作得很好，虽然我不知道是否有更“神奇”的方式将整个模态+可见性双向绑定到 currentTask。

现在，如果没有更好的方法来解决这个问题，我需要以某种方式侦听模态关闭事件，通常我们会在 jQuery 中使用 Vue 内部的 $('#myModal').on('hidden.bs.modal', function() ); 并设置 this.currentTask = null; 来执行此操作。

谢谢。

【参考方案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>

【讨论】：

它不起作用，我会尝试了解原因并回复。

我还没有找到为什么它不起作用。我在绑定、更新和取消绑定回调中有一个console.log('hello');，并且没有触发器，所以我猜该指令甚至没有被绑定。我在元素中做了<div id="task-modal" v-task-modal class="modal fade" tabindex="-1" role="dialog"> 和Vue.directive('task-modal', ...。