[Vuejs]-Components inside components VueJS

0👍

Your code works fine with props: ['info']
https://codepen.io/bsalex/project/editor/ApjgQd#

var data = {
  info: [
    {
      brand: "Samsung",
      model: "A9834",
      color: "black",
      id: 0
    },
    {
      brand: "Nokia",
      model: "Z9234",
      color: "blue",
      id: 2
    }
  ]
};

Vue.component("list-group", {
  props: ["info"],
  template:
    '<ul class="list-group"><list-group-item v-for="item in info" v-bind:key="item.id" v-bind:properties="item"></list-group-item></ul>'
});

Vue.component("list-group-item", {
  template:
    '<li class="list-group-item">{{properties.brand}}, {{properties.model}}, {{properties.color}}</li>',
  props: ["properties"]
});

var instance = new Vue({
  el: ".app",
  template: '<list-group :info="info">',
  data: data
});

Leave a comment