Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

85
Views
How to enable reactivity in a third party component with Slots. Vue3 & Quasar v2

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?

about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!