Vue/Vue 路由器未加载本地依赖项，仅在硬刷新后

Question

我正在使用 Vue 路由器构建 Vue 应用程序。我试图从 here 实现 jscolor 脚本。基本上你必须包含脚本，并将 jscolor class 添加到 html 元素。我正在使用 vue 中的 SFC。

HTML/Vue 模板

<div class="form-group row">
    <label for="departmentColor" class="col-sm-2 col-form-label label">{{ t('Color') }}</label>
    <div class="col-sm-10">
    <input type="text" class="CN-input-field jscolor" id="departmentColor" :value="department.color" @change="changeColor" :style="`background-color: ${department.color}`">
    </div>
</div>

JS

// Local deps (js file)
import jscolor from '../../../assets/js/jscolor';

所以基本上，当我在页面本身上进行硬刷新时，它是有效的，但是当我从另一个页面路由到该页面时，例如，脚本似乎没有加载，因为，颜色选择器不活跃。

是否有人遇到同样的问题，具有类似的依赖性？这个问题可能有解决方案吗？

Answer 1

查看 jscolor 的源代码，它似乎在页面加载后将自身注册到具有 jscolor class 的元素上。以后插入 DOM 的任何新元素将不受影响。

您的选择是：

使用支持动态元素的不同库。
您必须在新元素添加到 DOM 后手动将 jscolor 附加到它们（您可以使用 custom directive 来执行此操作）。

有趣的是，jscolor 没有对点击事件使用事件委托来覆盖这种情况。

Vue/Vue 路由器未加载本地依赖项，仅在硬刷新后

Local dependency not loaded with Vue/Vue Router, only after hard refresh

javascript

jscolor

vue.js

vue-router