如何在 vue v-for 中正确使用动态 id 名称？

Question

我正在尝试在 v-for 中迭代 div。 我正在尝试使用 index 参数进行动态 div id 分配，但我不知道如何正确使用它...

至少我正在使用引导折叠将数据目标分配给呈现的 div。 它不起作用。

代码如下：

                '<div class="servizioInlista" v-for="(servizio,index) in servizi.lineaGialla.servizi">'+
                        '<div class="row">'+
                            '<div class="col-lg-8 col-xs-8 nopadding">'+
                                '<h4 class="blu">{{servizio.nomeServizio}}</h4>'+
                            '</div>'+
                            '<div class="col-lg-4 col-xs-4>"'+
                                '<span class="pull-right nomargin"  v-on:click="mostraServiziGiallo" v-bind:class="[GiallaTutti ? \'minus\' : !GiallaTutti,\'plus\']" data-toggle="collapse" data-target="#singoloGialla.index"></span>'+                           
                            '</div>'+
                        '</div>'+
                        '<div v-bind:id="singoloGialla.index" class="row">'+
                            '<p>{{servizio.descrizione}}</p>'+
                        '</div>'+
                    '</div>'+

Answer 1

据我了解，您想要这样的东西：

<div v-bind:id="'singoloGialla-' + index" class="row">
  <p>{{servizio.descrizione}}</p>
</div>

和

< ... v-bind:data-target="'#singoloGialla-' + index">

因此，我们将字符串'singoloGialla-' 与index 变量的动态值连接起来。当我们使用+ 运算符连接字符串和数字时，首先将数字转换为字符串，然后连接到现有字符串。这不是 Vue 特定的，而是正常的 JavaScript 行为。