How to dynamically control VCardTitle background color in Trame/Vuetify3?

[Roadelse]

I'm trying to set a dynamic background color for a vuetify3.VCardTitle component. Since VCardTitle doesn't have a built-in background_color property (as shown in trame doc and vuetify3 doc), how can I bind a variable to its background color?

I'm not familiar with vue and have tried several approaches (some from AI):

• style="color: {{ bkg_color }}"
• style="{{ my_style }}"
• __properties=[("v-bind:style", "my_style")]

but none of these worked

Then I find this example: 28_css, but it only shows how to change global CSS styles rather than targeting a specific element.

Thus, I wonder what's the proper, or recommended way to bind a style variable to a specific VCardTitle component?

Thank you in advance for any answer!

[jourdain]

style=("{ color: bkg_color }",),

or

style=("`color: ${bkg_color};`",),

[Roadelse]

Thanks a lot! Looks like I've missed out on quite a bit of Vue knowledge :(

[jourdain]

The usage of {{ var }} is for text template not properties.

Also if you want to use __properties= you should have your tuple defined as (py_name, js_attr).

my_style="`color: ${bkg_color};`",
__properties=[(my_style, ":style")],