Javascript vue js是否可以在自定义组件模板中使用v-for？

我在网上什么也没找到。我想知道的是，是否可以在自定义组件的模板中使用

v-for

指令。以下是我所做的：

HTML

        <div id="macroservizi" class="col-lg-12 col-xs-12 collapse" v-if="modello">
           <lista-servizi :servizi="modello"></lista-servizi>
        </div>

自定义组件

Vue.component('lista-servizi', {
template:
                '<div id="tuttiGialla" class="collapse">'+
                    '<template class="servizioInlista">'+
                        '<div class="row" v-for="(single,index) in servizi.lineaGialla.servizi" :key="single.nomeServizio">'+
                            '<div class="col-lg-8 col-xs-8 nopadding">'+
                                '<h4 class="blu">{{single.nomeServizio}} {{index}}</h4>'+
                            '</div>'+
                            '<div class="col-lg-4 col-xs-4>"'+
                                '<span class="pull-right nomargin" v-on:click="mostraServiziGiallo(index)" 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>{{single.descrizione}}</p>'+
                        '</div>'+
                    '</template>'+
                '</div>',
 props: ['servizi'],

computed: {
    listaServizi() {
        return this.servizi
    }
}

Vue.component（'lista-servizi'{
模板：
''+
''+
''+
''+
“{single.nomeServizio}}{{index}”+
''+
“首先，
v-for
在自定义组件中工作良好

第二，无需使用字符串连接来构建模板。使用javascript包装模板，您可以使用任意多行

在这里，我已尽我所能清理您的组件

Vue.component('lista-servizi', {
  template:`
    <div>
        <div id="tuttiGialla" class="collapse">
          <template v-for="(single,index) in servizi.lineaGialla.servizi">
            <div class="row servizioInlista" 
                 :key="single.nomeServizio">
              <div class="col-lg-8 col-xs-8 nopadding">
                <h4 class="blu">{{single.nomeServizio}} {{index}}</h4>
              </div>
              <div class="col-lg-4 col-xs-4>">
                <span class="pull-right nomargin" 
                      v-on:click="mostraServiziGiallo(index)" 
                      v-bind:class="[GiallaTutti ? 'minus' : 'plus']" 
                      data-toggle="collapse" 
                      data-target="'#singoloGialla-' + index">
                </span>                            
              </div>
            </div>
            <div v-bind:id="'#singoloGialla-' + index" class="row">
              <p>{{single.descrizione}}</p>
            </div>
          </template>
        </div>
    </div>  
  `,
  props: ['servizi'],
  computed: {
    listaServizi() {
      return this.servizi
    }
  },
  created(){
    console.log(this.servizi)
  }
})

但该代码不在您的
v-for
范围内。我将
v-for
添加到了您的
模板中，这样模板的这一部分现在就在循环迭代的范围内。
谢谢@Bert Evans，但是如果我在控制台中以这种方式工作，我会发现以下消息：Uncaught SyntaxError:在模板运行时无效或意外的标记是declaring@PdsInk什么浏览器？@BertEvans您的模板以

Vue.component('lista-servizi', {
  template:`
    <div>
        <div id="tuttiGialla" class="collapse">
          <template v-for="(single,index) in servizi.lineaGialla.servizi">
            <div class="row servizioInlista" 
                 :key="single.nomeServizio">
              <div class="col-lg-8 col-xs-8 nopadding">
                <h4 class="blu">{{single.nomeServizio}} {{index}}</h4>
              </div>
              <div class="col-lg-4 col-xs-4>">
                <span class="pull-right nomargin" 
                      v-on:click="mostraServiziGiallo(index)" 
                      v-bind:class="[GiallaTutti ? 'minus' : 'plus']" 
                      data-toggle="collapse" 
                      data-target="'#singoloGialla-' + index">
                </span>                            
              </div>
            </div>
            <div v-bind:id="'#singoloGialla-' + index" class="row">
              <p>{{single.descrizione}}</p>
            </div>
          </template>
        </div>
    </div>  
  `,
  props: ['servizi'],
  computed: {
    listaServizi() {
      return this.servizi
    }
  },
  created(){
    console.log(this.servizi)
  }
})

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