包括所有页面上的Vue js实例，即使元素不存在

Including Vue js instances on all pages, even when element doesn't exist

本文关键字：实例 不存在 元素 js Vue 包括所      更新时间：2023-09-26

在我的web应用程序中，我使用Vue.js为网站周围的一些小组件。我将Vue实例存储在它们自己的js文件中，我使用gulp连接，缩小等。

有一个小问题，如果特定Vue实例的目标元素在页面上不存在，则在控制台中出现警告:

[Vue warn]: Cannot find element: #vueElement

虽然这并没有伤害任何东西，因为它是它让我想知道正确的方法是加载我的Vue实例。如果目标元素不存在，是否有办法阻止它发射?

var element = document.getElementById('vueElement');
if(element != null)
{
    // your code will be here, an example is shown below
    var app = new Vue(
       el: '#vueElement'
    );
}

我希望这工作!

我没有看到任何内置的方法来做到这一点。

如果在构造函数中提供el选项，Vue实例将自动编译。

如果您不提供el选项，您可以使用$mount方法手动编译组件

你可以这样写:

var app = new Vue({}); //don't include the el option here
if(document.getElementById("vueElement")) {
    app.$mount("#vueElement");      
}

我个人认为，为了达到这个目的，我使用一个函数，它只在目标元素存在时才初始化Vue:

function vueInit(elementId, options) {
    var element = document.getElementById(elementId);
    if (element) {
        options.el = element;
        new Vue(options);
    }
}

用法:

vueInit("app", {
    data: {
        message: "It works!"
    }
});
https://jsfiddle.net/50wL7mdz/14194/

相关文章：