Follow 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 just try to check if prop items is being passed this way:
<template id="my-li">
<li>
{{ items }}
</li>
</template>
I have as output:
[ "Bala", "Chocolate" ]
But when I try to apply the v-for directive I simply get a blank screen, but I can not seem to identify where I'm going wrong. Any help is welcome.