class="tab-title"
v-on:click="tab"
v-for="(tabTitle,index) in tabTitleList"
:id="index"
I found this example in an vue community, but in my situation, I want my "id" has a prefix, not just a number.
That is to say, if the index is 1, I want <span id='sp_1'></span> instead of <span id='1'></span>.
You can just do, code should be self explanatory:
<div v-for="(tabTitle, index) in tabTitleList">
<span :id="'sp_' + index"> {{tabTitle}} </span>
</div>
Documentation link.
If you have a unique id, do, you can just do like this:
<ul>
<li v-for="item in ritems" :id="['Row_' + item.id]">
{{something}}
</li>
</ul>
if you don't have a unique id, do this
<ul>
<li v-for="(item , index) in ritems" :id="['Row_' + index]">
{{something}}
</li>
</ul>
in both, the result will be like this:
<ul>
<li id="Row_12">
something
</li>
</ul>
Best way to dynamic the html attribut like :id,:class etc. with suffix & prefix string.
Prefix
Use concatenation sign "+" with your prefix string before vue variable into single quote. Ex.
:id=" 'prefix_string_'+ index "
:class=" 'prefix_string_'+ class "
<div v-for="(tabTitle, index) in tabTitleList">
<span :id="'sp_' + index"> {{tabTitle}} </span>
</div>
Same way for suffix
Use concatenation sign "+" with your suffix string after vue variable into single quote. Ex.
:id=" index + '_suffix_string' "
:class=" class + '_suffix_string'"
<div v-for="(tabTitle, index) in tabTitleList">
<span :id="index +'_sp'"> {{tabTitle}} </span>
</div>
