Как проверить наличие совпадений между массивами?

Question

[Александр]

Есть два массива ListsTime и BookedTime.
Есть span, который отрисовывается через for относительно ListsTime.
Я написал функцию, которая проверяет совпадения значений между этими массивами. Если есть, то необходимо добавить спану, где массивы пересеклись, свойство css. Но у меня в чём-то ошибка.

<template>
  <button @click="UpdateTime">Обновить время</button>
  <div class="column-s max-width maib-centr-column pannel-list-time">
    <span v-for="(TimeItem, index) in ListsTime" :key="index" class="list-time-item">
      {{ TimeItem }}:00
    </span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ListsTime: [10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23],
      BookedTime: [11, 12, 15, 16, 17, 18, 21, 22, 23],
    }
  },

  methods: {
    UpdateTime() {
      for (let i = this.ListsTime[0]; i <= this.ListsTime.at(-1); i++) {
        if (this.BookedTime.includes(i)) {
          console.log(i, 'ок')
          //document.getElementsByClassName('list-time-item')[i].style = 'background-color: #E5E5E5;'
        } else {
          console.log(i, 'false')
        }
      }
    },
  },
}
</script>

Answer 1

[Rsa97]

У вас ошибка в понимании реактивности vue. Не надо писать функцию, проверяющую что-то и меняющую стиль. Надо указать, в каком случае этот стиль должен применяться.

<template>
  <div class="column-s max-width maib-centr-column pannel-list-time">
    <span
      v-for="(TimeItem, index) in ListsTime"
      :key="index"
      :class="{'list-time-item': BookedTime.includes(TimeItem)}">
      {{ TimeItem }}:00
    </span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ListsTime: [10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23],
      BookedTime: [11, 12, 15, 16, 17, 18, 21, 22, 23],
    }
  },
}
</script>

<style>
  .list-time-item {
    background-color: #E5E5E5;
  }
</style>

Comments

[Александр]

Вон оно как, я даже об этом и не подумал. Спасибо большое за прояснение реактивности.