I wonder if there is a way to enable reactivity in default slot at QTooltip component https://quasar.dev/vue-components/tooltip#qtooltip-api
The problem is that QTooltip content keeps its initial value and doesn't change if the prop named 'nombrePintura' changes.
Here is the relevant code:
<template>
<div :class="{ [`box-color-container-${platform}`] : true }">
<div :class="{ [`box-color-${platform}`] : true, 'box-color--active': pinturaActiva }"
class="box-color"
:style="[{ 'backgroundColor': colorHex }]"
@click="emitSelectedColor">
</div>
<q-tooltip anchor="center left"
self="center right"
:offset="[10, 10]"
class="text-body2 box-color-tooltip"
:style="[{'backgroundColor': colorHex}]" v-if="platform === 'desktop'">
<!-- This content does not update if 'nombrePintura' changes. I'd like this to be updated each time 'nombrePintura' updates. -->
<strong class="pinturaName">{{ nombrePintura }}</strong>
</q-tooltip>
<span v-if="platform === 'mobile'">{{ nombrePintura }}</span>
</div>
</template>
<script lang="ts">
import { defineComponent, PropType } from 'vue'
export default defineComponent({
emits: ['onNewPaint'],
name: 'PaintBoxColor',
props: {
platform: {
type: String as PropType<'mobile' | 'desktop'>,
required: true
},
nombrePintura: { // This prop changes.
type: String,
required: true
},
colorHex: {
type: String,
required: true
},
pinturaActiva: {
type: Boolean,
default: false
}
},
setup (props, ctx) {
function emitSelectedColor () { ctx.emit('onNewPaint', props.colorHex) }
return {
emitSelectedColor
}
}
})
</script>
How can I update the content of q-tooltip each time prop 'nombrePintura' changes?