Ссылка на конкретную строку в таблице HTML / Vuetify.js

Question

Я использую v-simple-table в Vuetify для отображения содержимого журнала по одной строке на строку. Мне нужно иметь возможность отправить кому-то ссылку, которая приведет его к определенной строке в таблице. Я пытаюсь сделать это, используя идентификатор для каждого элемента в качестве хэш-привязки, но ссылка просто перезагружает страницу.

<v-simple-table height="500px" dense>
<template v-slot:default>
  <tbody>
    <tr v-for="(line, index) in logFile" :key="index">
      <td class="accent--text" v-show="showLineNumbers">
        <a :id="index" :href="'#/logs/view/204#'+index">{{ index }}</a>
      </td>
      <td>{{ line }}</td>
    </tr>
  </tbody>
 </template>
</v-simple-table>

Эта таблица находится внутри v-карты в v-контейнере на странице. Когда я наведите курсор мыши на номер для строки 100 журнала, например, ссылка выглядит как «{mydomain} / logs / view / 204 # 100», и элемент inspect показывает, что у нее есть идентификатор 100, но переходя по ссылке в браузере простозагружает страницу вверху.

Любая помощь высоко ценится!

Answer 1

Проблема в том, что браузер не может отправить пользователя на несуществующую часть страницы, поэтому он просто остается наверху.

Теперь вы можете подумать ...

Но это ясно, я это проверил, я вижу это.

Однако указатель, на который вы ссылаетесь, должен быть там во время открытия страницы, и так какконтент генерируется после загрузки страницы, эта функциональность не будет работать.

Если вы хотите, чтобы это работало, вам придется реализовать прокрутку самостоятельно, чтобы происходить послеТаблица отображается.

Один из способов сделать это - получить индекс по URL. window.location.hash даст вам hashbang, а затем вы можете использовать библиотеку, такую ​​как vue-scrollto, для выполнения прокрутки.