每次事件發生時隨機數變化

Question

所以我的數據中有這個 colors 數組，我通過使用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

你不想在你的風格中有一個隨機的 function。 這種風格將無限次觸發。

而是在頁面加載時創建一個變量，該變量由您的隨機 function 填充。 然后使用該變量來定義您的樣式。

Answer 2

如果單擊“自動完成”時彩色DIV引用的數據屬性或計算屬性不會改變，您可以考慮以下兩種解決方案：

解決方案1：

使用指令v-once ：

在 Vue 中渲染普通的 HTML 元素非常快，但有時您可能有一個包含大量 static 內容的組件。 在這些情況下，您可以通過將 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:_"