Vue: добавить компонент к элементу - PullRequest
Новая
       4

Vue: добавить компонент к элементу

0 голосов
/ 19 апреля 2019

У меня есть компонент vue, который выглядит следующим образом: 

<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>

Затем у меня есть EventListener, который прослушивает сообщения, отправленные через postMessage .Это работает, но я не думаю, что mount - это правильный способ делать то, что я хочу. 

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

То, что я ищу, это vue для добавления компонента вместо элемента .toast-containerзамены элемента.Как это можно сделать?

1 Ответ

1 голос
/ 19 апреля 2019

Как насчет создания и добавления элемента внутри .toast-container, а затем монтирования вашего компонента на этот новый элемент: 

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')
})
...