[Vuejs]-Using vuejs with existing html

by

0👍

✅

You could use Element.closest (with a polyfill if IE support is required)

const el = this.$root.$el.closest("*[data-is-published]");

That avoids having to know the hierarchy depth of the DOM.

Info on MDN

Edited to add:

The appropriateness of using this.$root.$el depends on how you plan to structure the code. If the element you’re trying to find is guaranteed to be a parent of the Vue application, then starting the search from $root is fine. If that bothers you, though, starting the search from this.$el instead would work.

The less conventional part of your approach is that it effectively creates a separate Vue application for each .vue-mount

Leave a comment