Как я могу сделать так, чтобы моя программа автоматически прокручивалась, чтобы видеть связанный класс в VueJs?

Question

<template>
  <div>
    <h2>Kanal Listesi</h2>
    <div class="container">
      <div v-for="(channel,index) in channels" :key="index">
        <div v-if="channel.ChName">
          <img
            :src="'http://uyanik.tv/conf/images/'+channel.Image"
            height="100px"
            :class="{selectedIndex:currentIndex === index}"
            :ref="index"
          />
        </div>
      </div>
    </div>
  </div>
</template>

Я связал класс компонентов img с динамически меняющимся индексом, и на экранах с более низким разрешением я хочу, чтобы моя программа отображала этот элемент, прокручивая его автоматически. Я не хочу, чтобы это переполнилось. Возможно ли какое-либо решение? Я также добавляю некоторые изображения, чтобы вы могли понять проблему, с которой я сейчас сталкиваюсь.

Переполненная версия:

Текущая версия: *

Answer 1

попробуйте следующее:

шаблон компонента

<template>
  <div>
    <h2>Kanal Listesi</h2>
    <div class="container">
      <div v-for="(channel,index) in this.channels" :key="index">
        <div v-if="channel.ChName">
          <img
            :src="'http://uyanik.tv/conf/images/'+channel.Image"
            height="500px"
            :class="{selectedIndex:currentIndex === index}"
            ref="channelImage"
          >
        </div>
      </div>
    </div>
  </div>
</template>

(обратите внимание: ref = "index" изменен на ref = "channelImage") в коде вашего компонента, вы должны добавить наблюдатель за свойством currentIndex (если он является реактивным и находится внутри вашей функции data ().

watch: {
    currentIndex() {
      window.scrollTo(0, this.$refs.channelImage[this.currentIndex].offsetTop);
    }
  },

надеюсь, что это поможет