尝试在 vue 的插槽内重新渲染数据时出现奇怪的行为答案

【问题标题】：strange behavior when trying to re-render data inside slot in vue尝试在 vue 的插槽内重新渲染数据时出现奇怪的行为
【发布时间】：2020-01-25 05:13:16
【问题描述】：

尝试使用 Vuetify 动态更新 Vue 中插槽的内容时，我遇到了奇怪的行为。我确定这只是对插槽如何工作的误解。

我在自定义组件中有一个插槽，如下所示：

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

当用户点击图标时，意味着将图标切换为不同的颜色。

我似乎无法让dropColor 在每次点击时始终触发，但是，奇怪的是，如果我在<v-icon> 组件内进行一些更改，比如我只是在v-icon 内添加{{dropColor(slotProps.player)}}标签，然后突然之间代码就可以工作了。

但是，如果我完全刷新页面，它就会停止工作。然后我删除那个代码并把它放回去，然后它又可以工作了！

我已经尝试过 forceUpdate 和 v-icon 标签上的键。

不胜感激

【问题讨论】：

你能把dropToggle的代码贴出来吗？

标签： vue.js vuejs2 vuex vuetify.js

【解决方案1】：

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

【讨论】：