每次事件发生时随机数变化答案

【问题标题】：Random number changes every time an event happens每次事件发生时随机数变化
【发布时间】：2020-10-12 16:27:19
【问题描述】：

所以我的数据中有这个颜色数组，我通过使用Math.random()从中获取一个随机元素，问题是每次我点击<v-autocomplete :items="types" label="User type" multiple v-model="filters"></v-autocomplete> 随机颜色变化。这是我的代码（我简化了它）：

<template>
  <div>
    <div
    :key="index"
    style="width:200px;height:200px;"
    :style="'background-color:' + colors[Math.floor(Math.random() * 10)]"
    v-for="(item, index) in items"
   >
  </div>
  <v-autocomplete :items="types" label="User type" multiple v-model="filters"></v-autocomplete>
</div>
</template>

我的数据：

data: () => ({
 items: [
  {
    name: "a"
  },
  {
    name: "b"
  },
  {
    name: "c"
  }
 ],
 colors: [
  "#C004D9",
  "#AB05F2",
  "#A69C0F",
  "#2745F2",
  "#1B78F2",
  "#F2BE22",
  "#F2E635",
  "#F29849",
  "#2405F2",
  "#6503A6",
  "#010440",
  "#F2E74B"
  ],
  types: ["user", "admin", "manager"]
})

我的问题是，当我点击某些东西或更改某些数据时，我可以阻止 vue 更新随机数吗？

【问题讨论】：

标签： javascript vue.js vuetify.js nuxt.js

【解决方案1】：

如果彩色DIV引用的数据属性或计算属性在单击“自动完成”时不会改变，您可以考虑以下两种解决方案：

解决方案 1：

使用指令v-once:

在 Vue 中渲染纯 HTML 元素非常快，但有时你可能有一个包含大量静态内容的组件。在这些在这种情况下，您可以确保它只评估一次，然后由将 v-once 指令添加到根元素

Vue.use(VAutocomplete.default)

new Vue({
  el: "#app",
  data () {return {
   items: [
    {
      name: "a"
    },
    {
      name: "b"
    },
    {
      name: "c"
    }
   ],
   colors: [
    "#C004D9",
    "#AB05F2",
    "#A69C0F",
    "#2745F2",
    "#1B78F2",
    "#F2BE22",
    "#F2E635",
    "#F29849",
    "#2405F2",
    "#6503A6",
    "#010440",
    "#F2E74B"
    ],
    types: ["user", "admin", "manager"],
    filters: []
  }}
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/v-autocomplete@1.8.2/dist/v-autocomplete.min.js"></script>
<div id="app">
  <v-autocomplete :items="types" label="User type" multiple v-model="filters"></v-autocomplete>
  <div v-once>
    <div
    :key="index"
    style="width:200px;height:200px;"
    :style="'background-color:' + colors[Math.floor(Math.random() * 10)]"
    v-for="(item, index) in items"
   >
  </div>
  </div>
</div>

解决方案 2：

将五颜六色的DIV封装到一个组件中，如果组件的依赖没有触发响应，组件将不会被更新。

Vue.use(VAutocomplete.default)
Vue.component('v-color', {
    'template': `
  <div>
    <div
    :key="index"
    style="width:200px;height:200px;"
    :style="'background-color:' + colors[Math.floor(Math.random() * 10)]"
    v-for="(item, index) in items"
   >
  </div>
  </div>
  `,
  data () {
    return {
     colors: [
      "#C004D9",
      "#AB05F2",
      "#A69C0F",
      "#2745F2",
      "#1B78F2",
      "#F2BE22",
      "#F2E635",
      "#F29849",
      "#2405F2",
      "#6503A6",
      "#010440",
      "#F2E74B"
      ],
     items: [
      {
        name: "a"
      },
      {
        name: "b"
      },
      {
        name: "c"
      }
     ],
    }
  }
})
new Vue({
  el: "#app",
  data () {return {
    types: ["user", "admin", "manager"],
    filters: []
  }},
  methods: {
    clickSomething() {
        this.types.push('a')
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/v-autocomplete@1.8.2/dist/v-autocomplete.min.js"></script>

<div id="app">
  <!-- <v-autocomplete :items="types" label="User type" multiple v-model="filters"></v-autocomplete> -->
  <v-autocomplete :items="types" label="User type" multiple v-model="filters"></v-autocomplete>
  <v-color></v-color>
</div>

或者作为@Rick的答案，您可以先在数据属性或计算属性中预先计算每个DIV的颜色值，然后将其绑定到:style="color:_"

【讨论】：

【解决方案2】：

你不想在你的风格中使用随机函数。这种风格会无限次触发。

而是在页面加载时创建一个由您的随机函数填充的变量。然后使用该变量来定义您的样式。

【讨论】：