javascript - 每次(重新)加载页面时，Vue.js 随机颜色附加到用户列表

Question

我有一些 jQuery 代码想要转换为 Vue.js。基本上，每次我(重新)加载页面时，都会为列表中的每个用户提供随机颜色，并且每次都不同。

这是 jQuery 代码:

//RANDOM USER COLOR
    $(".usersElements").each(function(index) {
    var idUser = $(this).attr("id");
        if ($.inArray(idUser, usersColors) == -1) {
            var letters = '0123456789ABCDEF';
            var color = '#';
            for (var i = 0; i < 6; i++) {
            color += letters[Math.floor(Math.random() * 16)];
        }
        usersColors.push(idUser);
        colors.push(color);
        $(this).find(".colorsByUser").css("background-color", color);
        } else {
            var index = usersColors.indexOf(idUser);
            $(this).find(".colorsByUser").css("background-color", colors[index]);
        }
    });

我忘了提及，这可能很重要。用户列表是动态的并使用 PHP 调用。这是 HTML:

                <div class="col-md-12">
                   <div id="users" name="users">
                   <!--- section to display the list of users starts -->
                        <?php   if(!empty($user))
                        { 
                            foreach($user as $value) 
                            { 
                            ?>
                                <div class="row oddEven usersElements userid" id=<?php echo $value->id;?> style="margin-top: -1vw;">
                                    <div v-on:click="displayAgregators(<?php echo $value->id;?>)" class="col-md-10">
                                        <span id="items<?php echo $value->id;?>"><?php echo ucfirst($value->username);?></span>
                                    </div>
                                    <div class="col-md-2">
                                        <div class="colorsByUser"></div>
                                    </div>
                                </div>
                            <?php } 
                        }?>
                    </div>
                </div>

我搜索了不同的解决方案，但没有任何与问题直接相关的解决方案。希望大家帮忙!

Answer 1

在 Vue 中，这始终只是对要显示的内容进行建模的问题。因此，您有一个用户列表，并且有一个生成随机颜色的函数。那么就这样了

<div v-for="user in users" :style="{backgroundColor: randomColor()}">{{user.name}}</div>

您也可以通过 id 实现颜色缓存:

const v = new Vue({
  el: '#app',
  data: {
    users: [{
      id: 1,
      name: 'Alice'
    }, {
      id: 2,
      name: 'Bob'
    }, {
      id: 3,
      name: 'Carol'
    }, {
      id: 4,
      name: 'Dennis'
    }],
    colorCache: {}
  },
  methods: {
    randomColor(id) {
      const r = () => Math.floor(256 * Math.random());

      return this.colorCache[id] || (this.colorCache[id] = `rgb(${r()}, ${r()}, ${r()})`);
    }
  }
});

setTimeout(() => {
  v.users.push({id: 5, name: 'Ellen'});
}, 1000);

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.3.3/vue.min.js"></script>
<div id="app">
  <div v-for="user in users" :style="{backgroundColor: randomColor(user.id)}">{{user.name}}</div>
</div>