Активатор Vue slot во время всплывающей подсказки повторно отображает мой v-образный значок

#vue.js #vuetify.js

#vue.js #vuetify.js

Вопрос:

Я пытаюсь поместить всплывающую подсказку на значок v, которому случайным образом присваивается цвет. Каждый раз, когда я наведу курсор мыши на значок v, цвет меняется. Я хочу, чтобы цвет был установлен только один раз. Я не хочу, чтобы цвет менялся каждый раз, когда мышь наводится на значок v. Есть предложения?

 <v-tooltip bottom>
  <template #activator="{on}">
    <v-icon v-on="on" :color="getRandomColor()">mdi-close</v-icon>
  </template>
  <span>Some Tooltip text</span>
</v-tooltip>
 

Ответ №1:

Я обошел это, создав цветовой массив в разделе data: Vue и сгенерировав там случайные цвета. Затем я просто вызываю этот конкретный индекс массива в цвете. Что-то вроде этого:

  data() {
   return {
     rColors: [getRandomColor(), getRandomColor()],
   }
 }
 <v-icon v-on="on" :color="rColors[0]">mdi-close</v-icon>
 

Есть ли способ избежать этого, введя ключевое слово в предыдущий код?

Что-то вроде

 v-on:once="on" ?