Context

I am in a situation in which I want to re-render some existing HTML using javascript. The server side is not under my control, I cannot apply any changes to the HTML document I am working on, I have to work fully client-side.

I would like to leverage vue functionality, using petite-vue. In order to do that, I plan to manipulate the DOM and add the vue directives to the DOM nodes in a preparation script. After that script is done, I want to mount the vue application.

Question

One problem with this approach is that some vue directives have illegal characters. For instance, on a certain element, I want to set an attribute Attr("@vue:mounted", "mounted()"). This raises a DOMException, because @vue:mounted is not a valid XML-Name (due to the starting @) which is a requirement for DOM attribute names.

How can I set this attribute so that vue is going to accept it? I think that vue somehow works around the illegal character, as it somehow manages to read the attribute. But I am not familiar with the internals of vue. Maybe there is also an way to achieve what I want without knowing the internals of vue, but I don't know how to do that either.

CodePudding user response：

In Vue the @ character (in templates) is just a shorthand for v-on:. And as petit-vue should be compatible in this regard, you can try to use Attr("v-on:vue:mounted", "mounted()") instead...