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

Question

[SightLS]

Сорри за глупый вопрос. Начал изучать 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'
      }
    }
  })

Comments

[SightLS]

:class="[(i_col % 2 !== row % 2) ? 'black' : 'white']"

Answer 1

[0xD34F]

Не надо indexOf, индексы доступны в v-for без каких-либо дополнительных телодвижений:

<div v-for="(row, iRow) in rows" class="board__rows">
  <div
    v-for="(col, iCol) in columns"
    v-text="col + row"
    :class="[ [ 'white', 'black' ][(iRow ^ iCol) & 1], 'board__square' ]"
  ></div>
</div>

Answer 2

[VolgaVolga]

Откройте для себя "computed".