It is not possible to use a v-for directive on passed prop to the Vue component

Asked

Viewed 45 times

1

Follows the code:

<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <meta charset="utf-8" />
        <title>Passagem de valores com VueJS</title>
    </head>
    <body>

        <div id="app">
            <my-ul>
                <my-li></my-li>
            </my-ul>
        </div>

        <template id="my-li">
            <li v-for="item in items">
                {{ item }}
            </li>
        </template>

        <template id="my-ul">
            <ul>
                <my-li :items="['Bala', 'Chocolate']"></my-li>
            </ul>
        </template>

        <script src="https://unpkg.com/vue"></script>
        <script>

            Vue.component("my-li", {
                template: "#my-li",
                props: ["items"],
            });

            Vue.component("my-ul", {
                template: "#my-ul",
                data: function() {
                    return {

                    }
                },
            });

            var app = new Vue({
                el: "#app",
                data: {
                    message: "Hello Vue"
                }
            });
        </script>
    </body>
</html>

If I’m just trying to see if prop items is being passed this way:

<template id="my-li">
    <li>
        {{ items }}
    </li>
</template>

I got a way out:

[ "Bala", "Chocolate" ]

But when trying to apply the directive v-for I simply get a blank screen, but I can’t identify where I’m going wrong. Any help is welcome.

javascript vue.js vue.js-2

1 answer

3


You’re having trouble rendering because you’re using DOM Template, take a look at documentation on the particularities of DOM Templates.

Basically, you need to use the attribute is. Like <ul> accepted only <li> as tag son, you write the tag <li> and says in the attribute is what component you want to render there.

See the examples, the meu-ul is the correction of the code you presented and the meu-ul-2 is what I believe you would like to use, with the API of slots

Vue.component('meu-li', {
  template: '#meu-li',
  props: ['item']
});

Vue.component('meu-ul', {
  template: '#meu-ul',
  props: ['itens']
});


Vue.component('meu-ul-2', {
  template: '#meu-ul-2',
  props: ['itens']
});

new Vue({
  el: '#app',
  data: function() {
    return {
      itens: ['Bacon', 'Banana', 'Nutella']
    };
  }
})
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>

<div id="app">

  <meu-ul :itens="itens"></meu-ul>

  <meu-ul-2 :itens="itens">
    <template slot="linha" slot-scope="slot">
      <meu-li :item="slot.item" />
    </template>
  </meu-ul-2>
</div>

<template id="meu-ul">
  <ul>
    <li is="meu-li" v-for="item in itens" :item="item"></li>
  </ul>
</template>

<template id="meu-li">
  <li>{{ item }}</li>
</template>

<template id="meu-ul-2">
  <ul>
    <slot name="linha" v-for="item in itens" :item="item"></slot>
  </ul>
</template>

  • Giovane thank you for the answer helped a lot.

Browser other questions tagged javascript vue.js vue.js-2

You are not signed in. Login or sign up in order to post.