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

在我的Web应用程序中，我使用Vue.js来处理网站上的许多小组件。我将Vue实例存储在他们自己的js文件中，我使用gulp进行concatonate，minify等。在所有页面上包含Vue js实例，即使元素不存在

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

[Vue warn]: Cannot find element: #vueElement

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

2015-07-28 harryg

这个答案解释更多http://stackoverflow.com/a/37902612/580651 – luchaos

var element = document.getElementById('vueElement'); 

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

我希望这个作品！

来源

2015-07-28 13:24:40

你可以做'if（element）' – tocqueville

我没有看到任何这样做的内置方式。

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

如果您没有提供el选项，则可以使用$ mount方法手动编译该组件。

所以，你可以写这样的事情：

var app = new Vue({}); //don't include the el option here 

if(document.getElementById("vueElement")) { 
    app.$mount("#vueElement");  
}

来源

2015-07-28 13:28:02 Needpoule

好主意，好方法。 =） – giovannipds

个人，为此，我用的是将初始化的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/

来源

2017-02-10 21:24:28 tocqueville

这样，你必须有jQuery或其他查询选择器框架或库来处理'$（selector）'，我个人建议你使用native/vanilla方式（'document.getElementById'）因为你不需要一个完整的库来达到这个目的。 =）检查@ Needpoule的答案。 – giovannipds

jQuery不是我的答案的重点......我反正把它删除了。我的观点是创建一个可重用的函数。你可以在里面使用你想要的选择器，这没有什么不同。 – tocqueville

尽管如此，我仍然更喜欢@ Needpoule的答案。 – giovannipds

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

回答

相关问题