Как прокрутить до нужного элемента в списке слева, когда я нажимаю кнопку «Назад» в Nuxt? - PullRequest
Новая
       135

Как прокрутить до нужного элемента в списке слева, когда я нажимаю кнопку «Назад» в Nuxt?

0 голосов
/ 21 октября 2019
  • У меня есть представление списка деталей с использованием динамических маршрутов Nuxt в режиме SSR
  • Список с переполнением-y отображается слева, а при щелчке по элементу содержимое отображается справа
  • Когда я нажимаю на каждый элемент, параметры URL меняются, и новый элемент отображается справа
  • Когда я нажимаю кнопку "Назад", отображается предыдущий элемент, но полоса прокрутки не изменяется
  • Как мнезаставить полосу прокрутки перейти к предыдущему элементу?
  • Вот GIF-файл, показывающий проблему, при нажатии назад список должен перейти к предыдущему элементу

enter image description here

<template>
  <div class="root">
    <div class="left">
      <ul>
        <li v-for="i in sortedArticles" :key="i.feedItemId">
          <nuxt-link :to="'/articles/' + i.feedItemId" :id="i.feedItemId" no-prefetch>{{ i.title }}</nuxt-link>
        </li>
      </ul>
    </div>
    <div class="right">Article {{ $route.params.id }}</div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  key(route) {
    return 'articles'
  },
  computed: {
    ...mapGetters({
      sortedArticles: 'news/SORTED_ARTICLES'
    })
  },
}
</script>

<style>
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  line-height: 1.8;
}
.root {
  display: flex;
  flex-direction: row;
  height: 100vh;
}
.left {
  flex: 1;
  overflow-y: auto;
}
.left ul {
  list-style-type: none;
}
.left li a {
  display: block;
  text-decoration: none;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid #eee;
  color: black;
}
.left li a:hover {
  color: darkorange;
}

.right {
  flex: 1;
}
</style>

Приведенный выше код представляет собой файл pages / article / _id.vue Как мне добиться этого в NUXT

1 Ответ

1 голос
/ 21 октября 2019

Вы должны использовать watch: 

<li :ref="'el' + i.feedItemId" v-for="i in sortedArticles" :key="i.feedItemId">

watch: {
    '$route.params.id': function(id) {
       this.$refs['el' + id].scrollIntoView()
    }
}
...