javascript - 按需使用 Vue 组件 - [Vue warn] : Cannot find element

Question

我正在开发一个 php/laravel 项目，需要在某些区域使用一些 vue 组件。目前，我的 vue 组件如下所示:

import Vue from 'vue';

import Notification from "./components/Notification.vue";

window.onload = function () {
   var main = new Vue({
      el: '#my-app',
      components: { Notification }
   });
}

但是，在没有 #my-app 元素的页面上，我收到以下错误:

[Vue warn]: Cannot find element: #my-app 

有办法防止这个警告吗？提出这个问题的另一种方法是，有没有办法通过创建 #my-app 元素在我需要的页面上使用我的通知组件，而不是在我不需要的页面上完全使用 #my-app 元素？ p>

或者，如果我理解正确的话，无论我是否使用通知组件，我都需要一个根 #my-app 元素？

Answer 1

您可以在挂载 Vue 之前动态创建一个 id my-app 的元素。

import Vue from 'vue';

import Notification from "./components/Notification.vue";

var myAppElement = document.getElementById('my-app');

if (!myAppElement) {
   var newMyAppElement = document.createElement('div');
   newMyAppElement.setAttribute('id', 'my-app');
}

window.onload = function () {
    var main = new Vue({
    el: '#my-app',
    components: { Notification }
});