javascript – Fixing the element number in each row-ThrowExceptions

Exception or error:
<template>
  <div @keyup="moveIndex" tabindex="0">
    <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}"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import channelz from "../trsubs.channels.json";
export default {
  data() {
    return {
      channels: channelz.Root.Channels.Channel,
      currentIndex: 1,
      channelPerRow: 9
    };
  },
  methods: {
    moveIndex(e) {
      if (e.keyCode == 39) {
        this.currentIndex = this.currentIndex === this.channels.length - 1 ? 1 : this.currentIndex+1; //son elemanda baş elemana geçiş
      }

      else if(e.keyCode == 37){
        this.currentIndex = this.currentIndex === 1 ? this.channels.length-1 : this.currentIndex-1; //baş elemandan son elemana geçiş
      }

      else if(e.keyCode == 40){

        if(this.currentIndex + this.channelPerRow < this.channels.length){
          this.currentIndex+=this.channelPerRow;
        }

        else if(this.currentIndex + this.channelPerRow > this.channels.length-1 &&
         this.currentIndex+this.channelPerRow/2+1 < this.channels.length-1){ //satır değişikliklerinde buradan son satır düzenlemesi yapılır
          this.currentIndex = this.channels.length-1;
        }

        else{
          this.currentIndex = this.currentIndex % this.channelPerRow;
        }
      }
      else if(e.keyCode == 38){
        if(this.currentIndex - this.channelPerRow > 0){ 
          this.currentIndex-=this.channelPerRow;
        }
        else if(this.currentIndex-1 < this.channelPerRow){  //ilk satırdaki elemanlardan en alta geçilmesi
          var curindex = this.currentIndex + this.channelPerRow * ((this.channels.length-1)%this.channelPerRow);
          this.currentIndex = curindex >= this.channels.length ? curindex-this.channelPerRow : curindex; //en alttaki satırdaki karşılık gelen sütun dolu değilseß
        }
      }
    }
  }
}
</script>

<style scoped>
.selectedIndex {
  border: 5px solid;
  border-color: aquamarine;
  opacity: 0.6;
  transition: 0.2s;
}
.container {
  display: flex;
  flex: 1 1 auto;
  flex-flow: row wrap;
  align-items: flex-start;
}
div > div > div > div > img{
  margin: 10px 10px 10px 10px;
}
</style>

Hi there. I am currently trying to fix the number of elements in each row in my code because the project will be used in TVs. My code moves the index according to key events. TV sizes will differ all the time so row number should be fixed to conduct proper use of moveIndex function. Isn’t there any way to make the element number in each row equal regardless of device resolution? Thanks!

How to solve:

Leave a Reply

Your email address will not be published. Required fields are marked *