时间戳

首页 > 解决方案 > strange behavior when trying to re-render data inside slot in vue

vue.js - strange behavior when trying to re-render data inside slot in vue

问题描述

I am getting strange behaviour when trying to dynamically update the content of a slot in Vue with Vuetify. I'm sure this is just a function of misunderstanding how slots work.

I have a slot in a custom component, like so:

<template #selectButtons="slotProps">
      <v-icon @click="dropToggle(slotProps.player)"    
         :color="dropColor(slotProps.player)"
         class="mr-5"
       >
         fas fa-skull-crossbones
       </v-icon>
</template>

When the user clicks on the icon, it is meant to toggle the icon to different colors.

I cannot seem to get dropColor to fire on each click consistently, HOWEVER, the weird part is, if I make some change inside the <v-icon> component, like say I just add {{dropColor(slotProps.player)}} inside the v-icon tags, then all of a sudden the code will work.

But then if I do a full refresh of the page, it stops working. Then I delete that code and put it back in, then it works again!

I have tried forceUpdate and keys on the v-icon tag.

Would appreciate any help

标签： vue.jsvuejs2vuexvuetify.js

解决方案

您正在尝试将功能dropColor(slotProps.player)作为道具传递。更好的想法是将函数替换为对象或变量，并在事件触发dropToggle(slotProps.player)后在方法内更改该对象/变量。@click

推荐阅读