[Vuejs]-Vue – detect component inside slot

by

1👍

✅

As content of the slot is passed to the component as an array of VNode’s accessible via this.$slots (in case of scoped-slots it is function returning array of VNode’s) you can write a function like this:

methods: {
    isListitem() {
        return this.$slots.headline && this.$slots.headline[0].tag.endsWith('-listitem')
    }
  }

Main problem is that $slots is not reactive

Docs:
Please note that slots are not reactive. If you need a component to re-render based on changes to data passed to a slot, we suggest considering a different strategy that relies on a reactive instance option, such as props or data

So I don’t recommend doing this and follow the Vue documentation suggestion to use props instead…

-1👍

Maybe you can use a function to try to get this element by js, something like this:

I am not sure if its will works

function checkElement(){
var listitem = document.querySelector("listitem");
  if(listitem) {
   // if exist do something

}
}

Leave a comment