current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other.

Join them; it only takes a minute:

Sign up
Join the Stack Overflow community to:
  1. Ask programming questions
  2. Answer and help your peers
  3. Get recognized for your expertise
up vote 1 down vote favorite
1

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.

share|improve this question
up vote 1 down vote accepted

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>
share|improve this answer
    
It's not working, I will try to understand why and will post back. – Pedro Moreira Aug 12 '15 at 22:40
    
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', {.... – Pedro Moreira Aug 13 '15 at 12:54
    
Nevermind, my mistake. The task-modal was outside the main element... – Pedro Moreira Aug 14 '15 at 8:41

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.