Question

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

至少我使用bootstrap collapse将数据目标分配给渲染的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行为。

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

1 个答案: