Using dynamic IDs in a string in a VueJS

Question

I'm using a UIKit library for a tab component that listens to a uk-tab property that targets an id. The problem with this, is that it creates the same ID for every tabbed component. I like the UI, but whoever thought of this, didn't think too far into it. I could fix it by making the id dynamic but I am having trouble calling it in the uk-tab property because it is rendering a string. Coming from a react background, I would do a string literal and some JSX, something like #item-${_id}to show #item-12, #item-13....and so on. But That's not working. How can I do this in Vue?

Here is an example of how it works

<div class="mytrigger">
    <ul uk-tab="connect: #component-tab-left; animation: uk-animation-fade">
</div>
<div class="mytargetedtab">
    <ul id="component-tab-left" class="uk-switcher">
</div>

Here is an example of how what I need

<div class="mytrigger">
    <ul uk-tab="connect: #_uid+'switcher'; animation: uk-animation-fade">
</div>
<div class="mytargetedtab">
    <ul :id="_uid+'switcher'" class="uk-switcher">
</div>

Check out the dev tools. It should be 810switcher, but instead is taking it as a string

Any ideas? Thanks

I think you are almost there, just put : before uk-tab and your _uid will get bind. — ravibagul91
– ravibagul91, Commented Sep 8, 2019 at 15:09

skirtle · Accepted Answer · 2019-09-08 15:31:44Z

2

I believe what you need is:

<ul :uk-tab="`connect: #${_uid}switcher; animation: uk-animation-fade`">

Or if you prefer not to use backticks:

<ul :uk-tab="'connect: #' + _uid + 'switcher; animation: uk-animation-fade'">

The output will be:

<ul uk-tab="connect: #22switcher; animation: uk-animation-fade">

A few notes:

Using a : is short for v-bind: but don't let the name confuse you. v-bind doesn't necessarily bind anything, it just makes the attribute value a JavaScript expression.
I'd avoid using numbers at the start of element ids, I've seen that cause problems in the past. It'd be better to put the numbers at the end.
The underscore at the start of _uid indicates that it's private to Vue. There are no guarantees about what form it will take or whether it will even exist going forward.

answered Sep 8, 2019 at 15:31

skirtle

29.3k4 gold badges49 silver badges63 bronze badges

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

1 Comment

LOTUSMS Over a year ago

This is it! It did exactly what I was looking for, however to my surprise, Both elements need the same id of component-tab-left for it to work because it's treating it as a css class, ::facepalm:: And then according to that id it ads a uk-active class with Javascript somewhere within their core files. sigh. Nevertheless, your solution worked for what I asked. Too sad it didn't actually solve the problem tho.

Diamond · Accepted Answer · 2019-09-08 19:31:37Z

1

Use data-uk-tab instead of uk-tab like below.

<div class="mytrigger">
    <ul data-uk-tab="{connect: `#${_uid}switcher`, animation: 'uk-animation-fade'}">
</div>
<div class="mytargetedtab">
    <ul :id="_uid+'switcher'" class="uk-switcher">
</div>

For more information => Switcher with tabs

answered Sep 8, 2019 at 19:31

Diamond

3,4904 gold badges21 silver badges43 bronze badges

Comments

tony19 · Accepted Answer · 2022-07-16 04:11:02Z

0

You can use any javascript expression in a data binding in vue. So, if you bind a string template to the attribute, it'll populate what you expect.

<ul :uk-tab="`connect: #${uid}switcher`'; animation: uk-animation-fade">

edited Jul 16, 2022 at 4:11

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Sep 8, 2019 at 14:12

Trenton Trama

4,9301 gold badge25 silver badges27 bronze badges

Collectives™ on Stack Overflow

Using dynamic IDs in a string in a VueJS

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related