Задать вопрос
@sheldon_coop

Прошу помочь исправить одну ошибку (1 строчка кода) при сборке проекта Vue 3?

Всем привет!

Стек проекта: Vue 3, TypeScript, Vite, Vue Router

Было все хорошо, все работало, никаких проблем.
НО, вчера добавил функцию для скролла/прокрутки к определенным элементам по клику на кнопку/по событию.
npm run dev - все работает как надо, прокрутка РАБОТАЕТ корректно, никаких ошибок в консоле браузера в том числе
а при сборке npm run build вылазит ошибка (во время сборки):

src/components/HomeView.vue:104:29 - error TS2749: 'Ref' refers to a value, but is being used as a type here. Did you mean 'typeof ref'?

104     const scrollTo = (view: Ref<HTMLElement | null>) => {

Found 1 error.


Красным подчеркивает именно "Ref" в 104 строчке
("ref" или "Ref" не имеет значения, ошибка та же)

Функцию брал из этой статьи/мануала:
https://dev.to/cn-2k/how-scroll-to-specific-elemen...

Мой код (скопировал выборочно, только касающиеся функции строки):

<template>
  
  .....

</template>

<script lang="ts">
import { defineComponent, computed, ref } from 'vue';
...
  ...

    const firstElement = ref<HTMLElement | null>(null);
    const secondElement = ref<HTMLElement | null>(null);
    const scrollTo = (view: Ref<HTMLElement | null>) => {
      view.value?.scrollIntoView({ behavior: 'smooth' })
    };

    const handleAdding = () => {
      .....
      scrollTo(firstElement);
    };

    const postEditing = (post: Post) => {
      .....
      scrollTo(secondElement);
    };

  ...

</script>


Может кто-то что-нибудь подскажет на что нужно исправить?
Также буду рад другим простым работающим реализациям для прокрутки к элементу по событию.
  • Вопрос задан
  • 140 просмотров
Подписаться 2 Простой 4 комментария
Решения вопроса 1
@sheldon_coop Автор вопроса
Решил проблему сам

Убрал функцию, изменил константы и просто напрямую вызываю прокрутку где нужно
Все работает сборка проходит без ошибок. Другого решения ошибки пока не нашел, нужно было срочно чтобы заработало

const firstElement = ref();
const secondElement = ref();

const handleAdding = () => {
      .....
      firstElement.value.scrollIntoView({ behavior: "smooth" });
};

const postEditing = (post: Post) => {
      .....
      secondElement.value.scrollIntoView({ behavior: "smooth" });
};
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 2
Lord_of_Rings
@Lord_of_Rings
Дунадан - северный странник. Злой, но очень добрый
Может Ref<InstanceType<typeof ref>>?
Ответ написан
Alexandroppolus
@Alexandroppolus
кодир
import { defineComponent, computed, ref } from 'vue';

попробуй добавить Ref в список импорта
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы