Is it possible to set v-on with javascript?

I’m trying to build a textbox that let’s a user drag tags into it, and move the tags within it by dragging. To do this I’m using a contenteditable div and creating a vue component programatically on dragstart like this:

starDrag(e) {
      var tag = Vue.extend(Tag);
      var tagInstance = new tag({
        propsData: { name: "Test" },
        events: {},
      });
      console.log(tagInstance);
      tagInstance.$mount();

      e.dataTransfer.setData("text/html", tagInstance.$el.outerHTML);
    },

Is there a way that I could set the events I want to listen to from this function? If there’s another way to go about this I’m open to suggestions.

Heres a tweaked codepen of how I would look into tackling this. Its not completely resolved but I think it should steer you into the correct direction.

Main points are:

  • avoid adding in elements with raw JS. You can do this with vue incredibly simply using v-if, v-for, or just straight up curly braces ( {{ }} )
  • this snippet is what allows you to listen to events and what allows you to differentiate the events from one another:
v-bind:key="i"
v-on:click="doSomething(i)"

Thanks for your help but this just seems to append the tags at the end of the text and it doesn’t allow me to drag them around the box. I read through the other posts about contenteditable and have decided it’s not worth it to try to do this with Vue. I’ve switched to using tiptap with a custom node and it’s working so far!