javascript - vue js 可以在自定义组件模板中使用 v-for 吗？

Question

我在网上找不到任何东西。我想知道是否可以在自定义组件的模板中使用 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
    }
}

我在控制台中有以下错误:

- tag <template> has no matching end tag. found in ---> <ListaServizi>

vue.js:435 [Vue warn]: Property or method "index" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.

found in

---> <ListaServizi>
   <Root>

[Vue warn]: Property or method "single" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.

我尝试了多种渲染方式，但现在我想知道它是否可行。

Answer 1

首先，v-for 在自定义组件中运行良好。

其次，无需使用字符串连接来构建模板。使用javascript template literals包装您的模板，您可以使用任意多行。

在这里，我已尽力清理您的组件。

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)
  }
})

这里的主要问题是您在模板的这一部分引用了 single 和 index:

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

但该代码在您的 v-for 的外部。我将 v-for 添加到您的 template 中，这样模板的那部分现在就在循环迭代的范围内。