Question

我目前正在根据图像的索引通过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>

Answer 1

尝试使用您的频道集合中已有的唯一值：ChName似乎是不错的选择。

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

这应该有助于我们了解已更改的内容和未更改的内容，并相应地重新呈现。

此外，请避免使用香草javascript在vue中选择元素。

我指的是：

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

可能应该转换为以下内容：

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

V-for在类更改时重新渲染所有组件

1 个答案: