Расширение обзоров в Vue.js приводит к прокрутке страницы вверх ⇐ Html

[Anonymous]

У меня возникла проблема с компонентом Vue.js, отображающим отзывы клиентов. Функция развертывания и свертывания отдельных отзывов в основном работает, но возникает проблема при повторном просмотре ранее развернутого отзыва.
Когда я выполняю следующие действия:

• Развернуть обзор 1 (нажмите «Читать полный обзор»).
• Свернуть обзор 1.
• Развернуть обзор 2.
• Вернитесь и разверните Обзор 1. еще раз.

Вместо того, чтобы раскрыть Обзор 1, как ожидалось, страница прокручивается вверх.

Код: Выделить всё

let currentlyExpandedReview: HTMLElement | null = null;

reviewMessages.forEach((message) => {
const truncated = truncateText(message.textContent || "", 100);

if (message.textContent && message.textContent.length > 100) {
message.dataset.fullReview = message.textContent;
message.textContent = truncated;

const readMoreLink = document.createElement("a");
readMoreLink.href = "#";
readMoreLink.textContent = "more";
readMoreLink.classList.add("read-more-link");

const readLessLink = document.createElement("a");
readLessLink.href = "#";
readLessLink.textContent = "...less";
readLessLink.classList.add("read-less-link");

readMoreLink.addEventListener("click", (event) => {
event.preventDefault();

if (currentlyExpandedReview && currentlyExpandedReview !== message) {
currentlyExpandedReview.classList.remove("expanded");
const truncatedText = truncateText(
currentlyExpandedReview.dataset.fullReview || "",
100
);
currentlyExpandedReview.textContent = truncatedText;
currentlyExpandedReview.appendChild(readMoreLink.cloneNode(true));
}

if (message.classList.contains("expanded")) {
message.classList.remove("expanded");
message.textContent = truncated;
message.appendChild(readMoreLink);
currentlyExpandedReview = null;
} else {
message.classList.add("expanded");
message.textContent =
message.dataset.fullReview || message.textContent;
message.appendChild(readLessLink);
currentlyExpandedReview = message;
}
});

readLessLink.addEventListener("click", (event) => {
event.preventDefault();
message.classList.remove("expanded");
message.textContent = truncated;
message.appendChild(readMoreLink);
currentlyExpandedReview = null;
});

message.appendChild(readMoreLink);
}
});

Наблюдения

• Проблема возникает только при повторном раскрытии ранее расширенного обзора.
• Страница прокручивается вверх вместо переключения обзора.

Шаги по воспроизведению

Шаги по воспроизведению
[*] Strong>

• Развернуть и свернуть отзыв.
• Развернуть еще один отзыв.
• Вернитесь и снова разверните первый отзыв.

Ожидаемое поведение[/b]
Первый отзыв должен разворачиваться правильно, без прокрутки страницы вверх.
Фактическое поведение
Страница прокручивается вверх, а не вверх. расширение обзора.
Возможная причина
Проблема может быть связана с href="#" на ссылках, в результате чего браузер по умолчанию прокручивается вверх.
Что я пробовал

• Изменение href="#" на href="", но при этом обновляется весь страница.

Как исправить эту проблему, чтобы обеспечить плавное развертывание и свертывание обзоров без прокрутки страницы вверх? Существуют ли передовые методы управления такими состояниями переключения в Vue.js с помощью динамически добавляемых прослушивателей событий?

Подробнее здесь: https://stackoverflow.com/questions/793 ... to-the-top