Блог

Главная - Вопросы по программированию - Пройдите по списку имен, пройдите по списку цветов и свяжите стиль цвета фона с одним из этих имен

Пройдите по списку имен, пройдите по списку цветов и свяжите стиль цвета фона с одним из этих имен

#javascript #loops #vue.js #vuex #v-for

Вопрос:

Я просматриваю массив цветов в моем магазине из компонента Vue, затем также просматриваю массив имен из того же магазина и отображаю их в div в моем компоненте. Я хотел бы привязать каждый div с именем к одному из цветов, мой код выглядит так

 <div  
           class="names"
            v-for="user in getUsers" 
            :key="user.id">
            <div
                id='user'
                v-for="color in getColor"
                :key="color.id"
                :style="{backgroundColor:color}"
                >{{user.name[0]}}
            </div>
        </div>

Проблема в том, что он показывает одно название для всех пяти цветов, которые у меня есть
Например, имя Джеймс отображается всеми пятью цветами, затем имя Сьюзен всеми пятью цветами. Я также извлекаю данные хранилища, используя вычисляемое свойство.

 computed: mapState({
    getUsers: state => state.users,
    getColor: state => state.colors })

Ответ №1:

Вам нужен один цикл и используйте его индекс, чтобы получить подробную информацию о другой записи на основе длины цветов и по модулю % :

      <div
        class="names"
        v-for="(user,index) in getUsers" 
        :key="user.id">
        <div
            id='user'
            :style="{getColors[index%getColors.length]}" >
              {{user.name}}
        </div>
    </div>

Комментарии:

1. Я собираюсь вместо того, чтобы иметь пять пользователей, у меня будет более 100, извлеченных из API, но цвета останутся прежними, в таком случае, что произойдет. На данный момент он отображается так, как я хочу, с небольшой проблемой повторения всех пяти цветов на одном имени, затем перехода к следующему имени и повторения всех пяти цветов снова. Я хочу, чтобы он показывал одно имя одного цвета, когда все цвета будут закончены, он начнет снова одно имя одного цвета, пока все имена не будут завершены

2. Я думаю, вам стоит попробовать с модом :style="{getColors[index%getColors.length]}"

3. хорошо, пожалуйста, не забудьте озвучить мой ответ

Метки: ,