遍历名称列表并循环颜色列表，并将背景颜色样式绑定到其中一个名称

Question

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

问题是它为我所有的五种颜色显示一个名称例如姓名 james 以所有五种颜色显示，然后姓名 susan 以所有五种颜色显示。我还使用计算的属性.

提取商店数据

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

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

遍历名称列表并循环颜色列表，并将背景颜色样式绑定到其中一个名称

Loop through a list of names and loop through a list of colors and bind the background color style to one of those names

javascript

loops

vue.js

vuex

v-for