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>

CUSTOM COMPONENT

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，以便模板的该位现在处于循环迭代的范围内。

使用v-for内部自定义组件模板可以使用vue js吗？

1 个答案: