vue js is possible using v-for inside custom component template?

Question

I found nothing around the web. What I was wondering is if it is possible to use the v-for directive inside the template of a custom component. Here is what I have done:

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

I have the following errors in the console:

- 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.

I tried multiple ways to render it, but at this point I wonder if it is even possible.

Bert · Accepted Answer · 2017-07-11 19:54:09Z

2

First, v-for works fine in a custom component.

Second, there is no need to use string concatenation to build your template. Use javascript template literals to wrap your template and you can use as many lines as you want.

Here I have tried to clean up your component as best I can understand it.

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

The main issue here is you were referencing single and index in this part of the template:

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

But that code was outside of your v-for. I added the v-for to your template so that that bit of the template is now in scope for the loop iteration.

edited Jul 11, 2017 at 19:54

answered Jul 11, 2017 at 18:35

Bert

82.6k17 gold badges205 silver badges166 bronze badges

Sign up to request clarification or add additional context in comments.

15 Comments

Pds Ink Over a year ago

thank you @Bert Evans, but if i work in this way in the console i find this message:

Pds Ink Over a year ago

Uncaught SyntaxError: Invalid or unexpected token

Pds Ink Over a year ago

just when the template is declaring

Bert Over a year ago

@PdsInk What browser?

thanksd Over a year ago

@BertEvans your template starts with </div>

|

Collectives™ on Stack Overflow

vue js is possible using v-for inside custom component template?

1 Answer 1

15 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

15 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related