Как создать v-on: события?

Question

[Alianos]

Здравствуйте, я могу написать директиву v-transitionend и назначить ей к примеру такой код

transitionend: {
      inserted(el, binding, vnode) {
        el.addEventListener("transitionend", () => {
          if (!vnode.context.isDropped) vnode.context.focusedObj = null;
        });
      },
    },

Но как сделать так чтоб вместо v-transitionend я мог писать @transitionend="mymethod()"
Тоесть чтоб код обработки можна было поставить не в директиву а в метод

Answer 1

[Aetae]

Что вы пристали к этим директивам. Директивы - нишевая фича, нужная в специфических общих случаях. Если вы пишите директиву для одного компонента - вы делаете что-то не так(99%).

Так вот @transitionend="mymethod" должно работать само по себе, без лишних телодвижений. В крайнем случае @transitionend.native="mymethod" если цель - другой компонент.

Comments

[Alianos]

Спасибо, позвольте спросить, как вы бы переработали директиву использующуюся только один раз в одном компоненте

dropped(el, binding, vnode) {
      if (vnode.context.isDropped) {
        el.style.height =
          el.firstChild.scrollHeight+
          "px";
      } else {
        el.style.height = 0;
      }
    },

Возможно, ето возможно через v-bind: но я не знаю как обратится к компоненту (тоесть аналог el)

[Aetae]

Alianos, как-то так:

data() {
  return {
    isDropped: true,
    style: {
      height: 'auto'
    }
  }
},
mounted() {
  this.style.height = this.isDropped ? this.$el.firstElementChild.scrollHeight + "px" : 0
}

Вместо this.$el.firstElementChild для надёжности лучше использовать this.$refs.some с проставлением соответствующего ref="some" в шаблоне.

Не оч понимаю, правда, нафига оно такое нужно.