class="tab-title" 
v-on:click="tab" 
v-for="(tabTitle,index) in tabTitleList"
:id="index"

Encontré este ejemplo en una comunidad vue, pero en mi situación, quiero que mi "id" tenga un prefijo, no solo un número.

Es decir, si el índice es 1, quiero <span id='sp_1'></span> en lugar de <span id='1'></span>.

9
wtf512 24 dic. 2016 a las 13:19

3 respuestas

La mejor respuesta

Simplemente puede hacer, el código debe explicarse por sí mismo:

<div v-for="(tabTitle, index) in tabTitleList">
    <span :id="'sp_' + index"> {{tabTitle}} </span>
</div>

Documentación enlace.

18
Saurabh 24 dic. 2016 a las 10:21

Si tienes una identificación única, hazlo, puedes hacer lo siguiente:

<ul>
    <li v-for="item in ritems" :id="['Row_' + item.id]">
        {{something}}
    </li>
</ul>

Si no tiene una identificación única, haga esto

<ul>
    <li v-for="(item , index) in ritems" :id="['Row_' + index]">
        {{something}}
    </li>
</ul>

En ambos, el resultado será así:

<ul>
    <li id="Row_12">
        something
    </li>
</ul>
1
Mohd Domais 31 ago. 2019 a las 05:20

La mejor manera de dinamizar el atributo html como: id,: class, etc. con sufijo y cadena de prefijo.

Prefijo

Use el signo de concatenación "+" con su cadena de prefijo antes de la variable vue en comillas simples. Ej.

:id=" 'prefix_string_'+ index "

:class=" 'prefix_string_'+ class "

<div v-for="(tabTitle, index) in tabTitleList">
    <span :id="'sp_' + index"> {{tabTitle}} </span>
</div>

La misma forma para el sufijo

Use el signo de concatenación "+" con su cadena de sufijo después de la variable vue en comillas simples. Ej.

:id=" index + '_suffix_string' "

:class=" class + '_suffix_string'"

<div v-for="(tabTitle, index) in tabTitleList">
    <span :id="index +'_sp'"> {{tabTitle}} </span>
</div>
0
Mayank Dudakiya 9 ene. 2020 a las 07:31