Question

所以我的数据中有这种颜色的数组，并且我通过使用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更新随机数吗？

Answer 1

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

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

Answer 2

如果单击“自动完成”时，如果彩色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 个答案: