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

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

标签： javascriptloopsvue.jsvuexv-for

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>