V-for перерисовывает все компоненты при изменении класса - PullRequest
Новая
       33

V-for перерисовывает все компоненты при изменении класса

0 голосов
/ 06 марта 2020

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

  <template>
  <div>
    <h2>Kanal Listesi</h2>
    <div class="container">
      <div>
      <div is="Channel" v-for="(channel,index) in channels" :key="index" :channel="channel"></div>
      </div>
    </div>
  </div>
</template>

<script>
import channelz from "../trsubs.channels.json";
import Channel from './Channel';
export default {
  components:{
    Channel
  },
  data() {
    return {
      channels: Object.freeze(channelz.Root.Channels.Channel),
      currentIndex: 1,
      columnNumber: 9,
      rowNumber: 7
    };
  },
    moveIndex(e) {
      var images = document.querySelectorAll("div > div > div > div > img");
      images[this.currentIndex-1]["className"] = "";
      switch (e.keyCode) {
        case 37:
          this.currentIndex =
            this.currentIndex === 1
              ? this.channels.length - 1
              : this.currentIndex - 1;
          break;
        case 38:
          this.currentIndex =
            this.currentIndex - this.columnNumber > 0
              ? (this.currentIndex -= this.columnNumber) : this.currentIndex
          break;
        case 39:
          this.currentIndex =
            this.currentIndex === this.channels.length - 1
              ? 1
              : this.currentIndex + 1;
          break;
        case 40:
          this.currentIndex =
            this.currentIndex + this.columnNumber < this.channels.length
              ? (this.currentIndex += this.columnNumber)
              : this.currentIndex;
          break;
      }
      images[this.currentIndex-1]["className"] = "selectedIndex";
    }
  }
};
</script>

Вот мой компонент канала: 

<template>
  <div v-if="channel.ChName">
          <img :src="'http://uyanik.tv/conf/images/'+channel.Image">
    </div>
</template>

<script>
export default {
    props:['channel']
}
</script>

1 Ответ

0 голосов
/ 06 марта 2020

Попробуйте использовать уникальное значение, которое вы уже имеете в своей коллекции каналов: ChName кажется хорошим кандидатом. 

<div is="Channel" v-for="(channel,index) in channels" :key="channel.ChName" :channel="channel"></div>

Это должно помочь vue понять, что изменилось, а что нет, и выполнить повторную визуализацию соответственно .

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

Я имею в виду: 

var images = document.querySelectorAll("div > div > div > div > img");

Что, вероятно, должно преобразован во что-то вроде: 

var images = this.channels.map(ch => ch.Image)
...