Как с помощью vue изменить background-color каждому второму элементу списка?

Question

[Ankozar]

Отрисовываю список с помощью v-for. Фон каждого второго элемента должен быть другого цвета. Не понимаю, как это сделать. Ведь если сразу забайндить стиль, то у каждого элемента будет такой фон.

Думал указать ключ со значением 0 в data, и у каждого второго элемента указывать фон, если этот параметр равен 1, но как менять параметр?

Answer 1

[NewUser4242]

Выводите элементы через v-for="(item,i) in items" (i это индексб мы будем проверять остаток от деления на 2, т.е является ли число парным)
Далее каждому проверку :class="i % 2 === 0 ? 'active' : '' "
И в стилях элементу с классом active(замените на нужный) пропишете фон)

Answer 2

[0xD34F]

Лучше никак. Такие вещи принято делать через css:

.item:nth-child(2n) {
  background-color: red;
}

<div v-for="n in items" class="item">

Но, конечно, можно назначать или не назначать стили в зависимости от индекса:

<div v-for="(n, i) in items" :style="i & 1 && { backgroundColor: 'red' }">

https://jsfiddle.net/qcu93h2w/

Comments

[Ankozar]

точно, про css я и забыл. Спасибо!

[Ankozar]

0xD34F, почему-то все элеметы списка получили новый цвет фона... Можете подсказать, почему?

[NewUser4242]

Ankozar, Попробуйте :nth-of-type

[NewUser4242]

Ankozar, А вообще в CSS есть селектор для парных и не парных :nth-child(even)

[0xD34F]

почему-то все элеметы списка получили новый цвет фона... Можете подсказать, почему?

Конечно же нет. Как вообще вам могла прийти в голову настолько дурная мысль? Угадывать косяки тут не принято. КОД ГДЕ?

[Ankozar]

NewUser4242, even тоже самое даёт.

[Ankozar]

0xD34F,

<div class='category-div__list'
        :class='[!$store.state.mobile ? "category-div__list_desktop" : "category-div__list_mobile"]'
        v-show="showList"
    >
        <span class='category-div__span'
        :key="cat.id"

        v-for='cat of categoryList'
        
        @click="
        $store.dispatch('bodySwitchScrolling', 1),
        $store.dispatch('menuСategoryHider', 1),
        $store.dispatch('getNews', {category: cat})"

        >{{ cat }}</span>

        <button class='category-div__close' value='Закрыть'>Закрыть</button>
    </div>

.category-div__list{
    display: grid;
    grid-template-rows: min-content;

    padding: 1vmin;

    background-color: white;
    border-width: 1px 1px 1px 1px;
    border-color: black;
    border-style: solid;

}

.category-div__list:nth-child(2n){
background-color: rgb(245, 245, 245);
}

.category-div__list_desktop{
    position: absolute;
    top: 100%;
    left: -25%;
    grid-gap: 1vmin;
}

[NewUser4242]

.category-div__list .category-div__span:nth-child(even){
background-color: rgb(245, 245, 245);
}
Что-то как-это, но исправить возможно надо будет

[0xD34F]

<span class='category-div__span'

Это, значит, элементы, которые надо стилизовать.

.category-div__list:nth-child(2n){

А это, соответственно, пошла стилизация.

category-div__span и category-div__list - это что, одно и то же? Вы документацию откройте, освежите память, как nth-child работает.

Answer 3

[imko]

Не усложняй, сделай через цсс, :nth-child(even)