Как сократить запись в v-bind

Question

Сорри за глупый вопрос. Начал изучать vue, но столкнулся с такой вот задачей. Нужно в v-bind:class указать условие(указал), но оно получилось слишком большим. нельзя это условие как-то перенести в методы, а это метод просто вызвать v-bind:class="метод()".

смотреть туда где :class="[...]"

    <div class="board__rows"
         v-for="row in rows" :key="row"
    >
      <div class="board__square"
           v-for="column in columns"
           :key="column"
           :class="[(columns.indexOf(column) % 2 && row % 2 === 0) || (columns.indexOf(column) % 2 === 0 && row % 2)  ? 'black' : 'white']"
      >{{ column }}{{ row }}
      </div>
    </div>
  </div>

<script>
export default {
  name: 'BoardCheckers',
  data: () => ({
    rows: [1, 2, 3, 4, 5, 6, 7, 8].reverse(),
    columns: ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h']
  })
}
</script>

пробовал вот так, но чет не получилось

  methods: () => ({
    condition: (column, row) => {
      const x = this.columns.indexOf(column)
      const y = row
      if ((x % 2 && y % 2 === 0) || (x % 2 === 0 && y % 2)) {
        // this.color = 'black'
        return 'black'
      } else {
        // this.color = 'white'
        return 'white'
      }
    }
  })
</script>

Answer 1

:class="[(columns.indexOf(column) % 2 && row % 2 === 0) || (columns.indexOf(column) % 2 === 0 && row % 2)  ? 'black' : 'white']"

Такую штуку надо переносить не в методы, а в css - примерно так:

.board__rows .board__square {
  background: white;
}

.board__rows:nth-child(odd) .board__square:nth-child(even) {
  background: black;
}

Кстати, само условие можно упростить до

columns.indexOf(column) % 2 != row % 2

Впрочем, всё равно квадратичная сложность вместо линейной.

БЛОГ НА HUSL

Как сократить запись в v-bind

Ответы (1 шт):