이름 목록을 반복하고 색상 목록을 반복하고 배경 색상 스타일을 해당 이름 중 하나에 바인딩합니다.

이름 목록을 반복하고 색상 목록을 반복하고 배경 색상 스타일을 해당 이름 중 하나에 바인딩합니다.

Vue 컴포넌트에서 내 스토어 내 색상 배열을 루핑하고, 같은 스토어의 이름 배열을 루핑하여 내 컴포넌트의 div에 표시합니다.이름을 가진 각 div를 색상 중 하나에 바인딩하고 싶습니다. My code는 다음과 같습니다.

<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>

문제는 내가 가지고 있는 5가지 색상에 대해 하나의 이름을 보여주는 것입니다. 예를 들어, 이름 제임스는 5가지 색상으로 모두 표시되며, 그 다음 5가지 색상으로 수잔의 이름을 지정하십시오.계산 속성을 사용하여 스토어 데이터도 가져옵니다.

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

색상 길이와 모듈로를 기준으로 다른 엔트리의 세부 정보를 얻으려면 하나의 루프가 필요하고 인덱스를 사용합니다.%:

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

언급URL : https://stackoverflow.com/questions/68439633/loop-through-a-list-of-names-and-loop-through-a-list-of-colors-and-bind-the-back