如果元素存在则实例化Vue？

Posted 2023-03-24

【中文标题】如果元素存在则实例化Vue？

【英文标题】：Instance Vue if element exists?

【发布时间】：2016-10-20 11:16:00

【问题描述】：

我正在构建一个页面有一些虚拟机的应用程序，而其他页面则没有。当我们从一页切换到另一页时，会显示以下警告：

[Vue warn]: Cannot find element: #element-id

如何仅在页面上有元素的情况下实例化VM并避免错误？

注意：我使用的是 Rails 资产管道，因此，所有的 javascript 都被连接到一个文件中。

【参考方案1】：

保持原样没有问题。这只是一个仅在调试模式打开时运行的警告，因此无论如何您都应该在生产中将其关闭。

如果你想摆脱它，只需在启动 Vue 之前检查该元素是否存在 -

if(document.getElementById("element-id"))
  new Vue(...)

参考：How to check if element exists in the visible DOM?

【讨论】：

很好的答案，我刚刚遇到预加载库的情况，并认为这将是一个问题。

【参考方案2】：

这是一个老问题。我发现这个 Vue 示例很有用

https://vuejs.org/v2/api/#Vue-extend

因此，您可以创建一个 Vue 类并仅当 DOM 元素存在于 DOM 中时才启动它。

// create constructor
var Profile = Vue.extend(
  template: '<p>firstName lastName aka alias</p>',
  data: function () 
    return 
      firstName: 'Walter',
      lastName: 'White',
      alias: 'Heisenberg'
    
  
)
// create an instance of Profile and mount it on an element
if(document.getElementById("element-id"))
  new Profile().$mount('#element-id')