仅在加载元素时运行 vue 组件

Posted 2023-02-22

【中文标题】仅在加载元素时运行 vue 组件

【英文标题】：Run vue component only if element loaded

【发布时间】：2018-03-13 16:19:58

【问题描述】：

我在 javascript 上定义了一个小的 vue.js 组件。

是否有任何优雅的方式仅在加载元素时实例化 vue 组件？

问题是我在其他不存在该元素的 html 中收到这些警告：

vue.js:485 [Vue warn]: Cannot find element: #item

因为它到处运行这个js

  new Vue(
    el: '#item',
  );

vue.js 中是如何处理的？

【问题讨论】：

您的问题可以通过上一篇文章解决：***.com/questions/29484431/…

onload 不能在没有 #item 元素的 html 页面上工作

您是否使用 ajax 请求加载您的元素？我不明白为什么它在第一次加载时不存在

因为你可以有一个 index.html 和一个 不会给 Vue 带来问题，然后是一个 stuff.html 不会有任何 并且当 javascript vue.js 在该页面中执行时会抱怨，因为页面中不存在#item 元素

你不能只在带有#item 元素的文件上加载脚本吗？

【参考方案1】：

在创建实例之前测试元素。

if(document.getElementById("#item"))
  new Vue(
    el: '#item',
  );

【讨论】：

是的，我正在考虑这个，但对我来说看起来并不那么优雅，那么这是唯一的方法吗？

我不知道只有 vue 的方式。但是，这只是一个警告，这意味着您不应该在调试模式关闭的情况下在生产中看到它，如果这是任何调解的话。

好的，这个问题暂时悬而未决，如果没有人知道 vue-only 方式我接受这个答案