Vue.js는 이름에 점이 있는 DOM 커스텀이벤트에 바인드(부트스트랩이벤트 등)

Vue.js는 이름에 점이 있는 DOM 커스텀이벤트에 바인드(부트스트랩이벤트 등)

Vue 2.1.10 사용

DOM 이벤트에 바인드 할 수 있습니다.v-on지시.예를 들어 다음과 같습니다.

v-on:click

DOM 에 바인드 하려면 , 을 클릭합니다.하지만 이름에 점이 있는 이벤트에 어떻게 묶어야 할지 모르겠어요.예를 들어 부트스트랩의 "show.bs.modal"과 같이 입력합니다.

현시점에서 회피책 바인딩을 사용하고 있습니다.created일반 DOM 메서드를 사용하는 후크입니다만, 선언형 구문을 사용하고 싶습니다.어떻게 하면 좋을까요?고마워요.

편집: 질문은 허용되는 구문에 관한 것입니다.어떻게 하면 다음과 같은 작업을 수행할 수 있을까요?

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

     }

   }
})

예전 프로젝트를 할 때도 똑같은 문제에 직면해 있었습니다.

다행히 여기서 답을 찾았습니다.vue2 doc

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

이것은 부트스트랩 5.1.1과 Vue 2.16.14로 동작합니다.

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

에서는 점이 지원되지 않는 것 같습니다.v-on단, 커스텀 디렉티브를 생성하여 해당 이벤트의 이벤트청취자를 작성할 수 있습니다.

아래 데모와 같은 간단한 것이 있는지, 아니면 이 바이올린이 작동해야 하는지 잘 모르겠습니다.

데모에서는 이름에 점이 있는 새로운 이벤트가 생성되지만 부트스트랩 이벤트(테스트되지 않음)에서도 동작합니다.부트스트랩이 작동하지 않으면 알려주시면 확인해 보겠습니다.

바인드 해제 기능은 사용 중인 경우에만 작동합니다.v-ifJavascript를 사용하여 해당 요소를 직접 제거하는 경우.그 행사는 여전히 그곳에 있을 것이다.

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>

언급URL : https://stackoverflow.com/questions/42186149/vue-js-bind-to-dom-custom-event-with-dots-in-name-like-bootstrap-events