Vue3项目中Vanilla JS Datepicker的正确配置方法咨询

1. 安装依赖 #

首先执行包安装命令：

npm install --save-dev vanillajs-datepicker

2. 初始尝试的问题 #

最初的模板和脚本代码如下：
模板：

<input type="text" name="foo" />

脚本：

import { Datepicker } from "vanillajs-datepicker";

mounted() {
    const elem = document.getElementById("foo");
    const datepicker = new Datepicker(elem, {
      // ...配置项
    });
},

此时出现ESLint报错：

error 'datepicker' is assigned a value but never used

同时在Vue项目中直接使用document.getElementById并非最佳实践，Vue提供了更可靠的元素引用方案。

3. 修复后的正确配置 #

更新模板使用ref标识目标元素：

<input type="text" ref="foo" />

脚本中通过this.$refs获取元素并实例化Datepicker（若无需后续操作实例，可直接实例化不赋值变量，避免未使用变量的报错）：

import { Datepicker } from "vanillajs-datepicker";

mounted() {
    new Datepicker(this.$refs.foo, {
      // ...配置项
    });
},

调整后配置即可正常运行。

内容的提问来源于stack exchange，提问作者RGriffiths