Vue.js связываются с DOM пользовательского события с точками в имени (например, бутстраповских событий)

Question

Использование Vue 2.1.10

Я могу связать с событиями DOM с v-on директивы. Например:

v-on:click 

Для привязки к DOM нажмите. Но я не могу понять, как привязываться к событию с точками в имени. таких как «show.bs.modal» из бутстрапа.

В настоящее время я использую привязку обходного пути в hook created с помощью обычных методов DOM, но я действительно хотел бы использовать для этого декларативный синтаксис. Как это можно достичь? благодаря

EDIT: Вопрос о разрешается синтаксис: как я могу сделать что-то вроде:

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

    } 

    } 
}) 

Answer 1

Я думаю, что точки не поддерживаются в v-on, но вы можете создать пользовательскую директиву, чтобы создать событие слушателя для этого события.

Не уверен, что есть что-то проще, но что-то вроде демонстрации ниже или это fiddle должно работать.

Демо создает новое событие с именами точек, но это также должно работать с событиями начальной загрузки (не проверено). Пожалуйста, дайте мне знать, если он не работает с бутстрапом, и я посмотрю.

Unbinding работает только если вы используете v-if. Если вы удаляете этот элемент с помощью Javascript напрямую. Событие все равно будет.

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>