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

Question

So, in my Vue instance, I have a currentTask model, which is null by default.

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

    data: {
        currentTask: null
    }
});

When I click on a 'task-item', which has v-on="click: openTask" directive, i want to launch the modal with the currentTask:

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

        e.preventDefault();
    }
}

This is working just fine, although I don't know if there is a more "magical" way to two-way bind the whole modal + visibility to the currentTask.

Now, what I need, if there is no better way to go about this, is to somehow listen for the modal close event, which normally we would do in jQuery with $('#myModal').on('hidden.bs.modal', function() {}); inside of Vue and set this.currentTask = null;.

Thank you.

Kelt · Accepted Answer · 2015-08-12 15:50:41Z

3

You could probably use a custom directive to handle this.

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
   }
})

In your html you would need to put this directive on the modal element like so...

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

answered Aug 12, 2015 at 15:50

Kelt

3613 silver badges4 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Pedro Moreira Over a year ago

It's not working, I will try to understand why and will post back.

Pedro Moreira Over a year ago

I haven't found why it's not working. I have a console.log('hello'); in the bind, update and unbind callbacks and none triggers, so I guess the directive is not even being bound. I did <div id="task-modal" v-task-modal class="modal fade" tabindex="-1" role="dialog"> in the element and Vue.directive('task-modal', {....

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related