Vue3 Functional Component render function Primevue Tooltip

Question

rowTooltip: (createElement, cell, property, context) => {
            return withDirectives(createElement("div",  "any value"), ["tooltip", "is this the tooltip value?", "is this the value actually?", "no this is the value argument"]);
        },

how do I render this tooltip directive : https://www.primefaces.org/primevue/tooltip

inside a render function loop inside a functional component with vue3.

I've been trying for hours

added a fork with my problem

Art Hitrick · Accepted Answer · 2022-10-13 15:45:23Z

2

vue3 has function h

using with setup function:

setup() {
  const tooltip = resolveDirective('tooltip');

  return () => {
    const vnode = withDirectives(
      h(Button, { label: "I'am dynamic button, hover me too" }),
      [[tooltip, 'tooltip directive with render function']]
    );

    return vnode;
  };
}

example: https://stackblitz.com/edit/vue-gg76si?file=src/main.js

answered Oct 13, 2022 at 15:45

Art Hitrick

1456 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Liad Goren Over a year ago

thank you for that answer - this works - as your example shows. And I've renamed "h" to "createElement" while importing my issue occurs when I try to do THAT but while inside a render function in a functional component (where you no longer have "this" - as in a proper context) My theory is that my component no longer has access to "PrimeVue" that I had while instantiating the application - since my functional component is a a standalone instance. Any idea about that?

Liad Goren Over a year ago

stackblitz.com/edit/vue-6yjp8d?file=src/components/… Added my own fork of your project to simulate my problem

Art Hitrick Over a year ago

@LiadGoren just add defineComponent stackblitz.com/edit/…

Liad Goren Over a year ago

will this still be a stateless functional component? I'm using this tooltip inside a HUGE framework like Data Tree Table I've built It is incredibly big and complex so I've refactored it half a year ago to a functional component for performance. So the component I'm using this in must be functional

Liad Goren Over a year ago

by using the "define component" wrapper I'm losing the performance gained by using a functional component. as much as your solution is clean and correct for most cases - I must insist on staying stateless and functional. even if it means there's no solution to this problem

Collectives™ on Stack Overflow

Vue3 Functional Component render function Primevue Tooltip

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related