Vue3 с использованием Vanilla JS Datepicker
Я пытаюсь использовать Vanilla JS Datepicker в проекте Vue3, но не знаю, как правильно его настроить. Согласно документам (которые, как я понимаю, конкретно не относятся к Vue), я установил пакет:
npm install --save-dev vanillajs-datepicker
В шаблоне:
<input type = "text" name = "foo" />
Сценарий:
import { Datepicker } from "vanillajs-datepicker";
mounted() {
const elem = document.getElementById("foo");
const datepicker = new Datepicker(elem, {
// ...options
});
},
Я получаю сообщение об ошибке:
ошибка 'datepicker' присваивается значение, но никогда не используется
ОБНОВЛЯТЬ
<input type = "text" ref = "foo" />
new Datepicker(this.$refs.foo, {
// ...options
});
И все работает.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Обновлять
Это рабочее решение, которого я достиг.
Я уже нахожу это немного грязным, не уверен, что буду использовать его, но, скажем так, он работает.
<script setup>
import { onMounted } from "vue";
import "../../node_modules/vanillajs-datepicker/dist/css/datepicker.min.css";
import Datepicker from "vanillajs-datepicker/Datepicker";
onMounted(() => {
const elem = document.querySelector('input[name = "date"]');
const datepicker = new Datepicker(elem);
console.info("picker", datepicker);
});
</script>
<template>
<input type = "text" name = "date" />
</template>
Эта ошибка связана с ESlint, это означает, что ваша переменная datepicker не используется в коде (на этом веб-сайте много подобных вопросов, которые вы можете найти, если вам нужна дополнительная информация).
Например, если вы используете console.info(datepicker), он исчезнет.
Вы также можете отключить это rule или пометить его как warning.
Что касается elem, вам лучше использовать ссылку на шаблон: https://vuejs.org/guide/essentials/template-refs.html#template-refs
Это даст тот же результат, что и селектор документов, но лучше, поскольку вы используете SPA.
@RGriffiths Я поделился примером Composition API. Не совсем уверен, почему это не работает с refs, у меня нет большого опыта работы с CAPI.
Хороший. Приятно видеть другие способы сделать это.
Идеальный. Это действительно работает, если я просто удалю определение datepicker. Хорошая мысль о $refs. Еще раз спасибо - отличная помощь.