How to properly pass $index in Bootstrap data target?

Question

I created dynamic ids using v-for index, the problem is when I'm trying to use Bootstrap's data-target to link the div

This doesn't work:

<button data-toggle="collapse" data-target="'#demo'+{{$index}}">EXPAND</button> 

<div v-bind:id="['demo'+index]" class="collapse">
    {{service.sotto[index]}}
</div>

So how to properly use data-target + index?

Howl

Have you tried v-bind:data-target="'#demo'+{{$index}}"? – Unclothe

Also the square brackets in v-bind:id="['demo'+index]" don't feel right. – Unclothe

thank you for the suggestion @LukaszWiktor, v-bind:id with square brackets work fine, v-bind:data-target="'#demo'+{{$index}} instead give me the error "- invalid expression:" – Howl

Answer 1

found it!

:data-target="'#demo' + index" 

Howl

Alternatively, you should also be able to do data-target="#demo{{$index}}" – Respectable

You could use :data-target="`#demo${index}`" – Manis

And think Id can be used like <div :id="'demo'+index"> – Paella