Vue.js bind to DOM custom event with dots in name (like bootstrap events)

Question

Using Vue 2.1.10

I can bind to DOM events with v-on directive. For example:

v-on:click

To bind to DOM click. But I can't figure how to bind to an event that has dots in the name. such as "show.bs.modal" from bootstrap.

Currently, I use a workaround binding in the created hook with Regular DOM Methods, but I really would like to use the declarative syntax for that. How can this be achieved? thanks

EDIT: The question is about allowed syntax: how can I do something like:

Vue.component('comp',{
  template:'<div v-on:show.bs.modal="sunrise"></div',
  methods:{
    sunrise:function(e){

     }

   }
})

@Austio Not a "fiddle" question, a syntax question, see edit — alonisser
– alonisser, Commented Feb 12, 2017 at 19:28
See this: github.com/vuejs/vue/issues/201 So, it would be something like: v-on="show.bs.modal:..." This is very old, I don't know if it still works, try it. — XCS
– XCS, Commented Feb 12, 2017 at 19:46

tony19 · Accepted Answer · 2022-07-15 21:00:48Z

11

I was facing the very same problem when working on old projects.

Luckily I found the answer here: vue2 doc

<!-- object syntax (2.4.0+) -->
<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>

This works on Bootstrap 5.1.1 with Vue 2.16.14:

<div class="modal" v-on="{ 'hide.bs.modal': handleModalClose }">
...
</div>

edited Jul 15, 2022 at 21:00

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Nov 3, 2021 at 2:47

peorthijel

1311 silver badge5 bronze badges

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

Comments

AWolf · Accepted Answer · 2017-02-12 23:09:46Z

I think dots are not supported in v-on but you could create a custom directive to create an event listener for that event.

Not sure if there is something easier but something like in the demo below or this fiddle should work.

The demo creates a new event with dots in name but that should also work with bootstrap events (not tested). Please let me know if it's not working with bootstrap and I'll have a look.

Unbinding only works if you're using v-if. If you're removing that element with Javascript directly. The event will still be there.

var helloEvent = new Event('demo.event.hello');

document.addEventListener('demo.event.hello', function(e) {
  // this is just for testing event dispatching!
  console.log('main event listener');
}, false);

const bindCustomEvent = {
  getName: function(binding) {
    return binding.arg + '.' +
      Object.keys(binding.modifiers).map(key => key).join('.');
  },
  bind: function(el, binding, vnode) {
    const eventName = bindCustomEvent.getName(binding);

    console.log(el, eventName);
    document.addEventListener(eventName, binding.value);
  },
  unbind: function(el, binding) {
    const eventName = bindCustomEvent.getName(binding);
    console.log('unbinding', eventName);
    document.removeEventListener(eventName, binding.value);
  }
};

Vue.directive('bindCustomEvent', bindCustomEvent);

new Vue({
  el: '#app',
  data() {
    return {
      enabled: true,
      eventMsg: ''
    };
  },
  methods: {
    sunrise: function(e) {
      console.log('received event');
      this.eventMsg = 'received event';
    },
    testEvent: function() {
      document.dispatchEvent(helloEvent);
    },
    toggle: function() {
      console.log('toggle', this.enabled);
      this.enabled = !this.enabled;

      if (!this.enabled) {
        this.eventMsg = '';
      }
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.js"></script>
<div id="app">
  <div v-bind-custom-event:demo.event.hello="sunrise" v-if="enabled">
    Hello, {{eventMsg}}
  </div>

  <!--
  The following markup is not working
  <div v-on="demo.event.hello:sunrise" v-if="enabled">
    Hello, {{eventMsg}}
  </div>-->
  <button @click="testEvent()">
    Change
  </button>
  <button @click="toggle">
    <span v-if="enabled">disable custom event</span>
    <span v-else>enable custom event</span>
  </button>
</div>

Collectives™ on Stack Overflow

Vue.js bind to DOM custom event with dots in name (like bootstrap events)

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related