Vue: Append component to element

Question

I have a vue component that looks like this:

<template>
  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-autohide="true" data-delay="5000">
    <!-- HTML Clipped -->
    <div class="toast-body">{{message}}</div>
  </div>
</template>

<script>
export default {
  props: ['title', 'message']
}
</script>

I then have an eventListener that listens for messages sent via postMessage. This does work, but I don't think mount is the correct way to do what I want.

window.addEventListener('message', e => {
  let toastComp = Vue.extend(Toast)
  let toast = new toastComp({
    propsData: {
      message: 'hello'
    }
  }).$mount('.toast-container')
})

What I am looking for, is for vue to append the component to the .toast-container element instead of replacing the element. How can this be done?

Steve Holgado · Accepted Answer · 2019-04-19 16:14:58Z

9

How about creating and appending an element inside of .toast-container and then mounting your component on to that new element:

window.addEventListener('message', e => {
  const toastContainer = document.querySelector('.toast-container')
  const mountNode = document.createElement('div')
  mountNode.id = 'mount-node'
  toastContainer.appendChild(mountNode)

  let toastComp = Vue.extend(Toast)
  let toast = new toastComp({
    propsData: {
      message: 'hello'
    }
  }).$mount('#mount-node')
})

answered Apr 19, 2019 at 16:14

Steve Holgado

12.1k4 gold badges26 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Get Off My Lawn Over a year ago

instead of passing #mount-node to $mount() I think it would be better to pass mountNode element

Steve Holgado Over a year ago

Glad this helped you out :)

Mike T Over a year ago

Where was Toast declared/set so that you could access it in the event listener?

Collectives™ on Stack Overflow

Vue: Append component to element

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related