Question

我是VueJs的新手，我遇到以下问题（请原谅我，如果这个问题看起来很愚蠢，但我还没有找到答案）：

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

    Vue.component('list-group', {
        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', 
        data: data
    })

我尝试使用上面的代码片段来渲染组件中的组件。我在控制台中遇到的错误如下：

[Vue警告]：财产或方法＆＃34;信息＆＃34;未在实例上定义，但在呈现期间引用。通过初始化属性，确保此属性在数据选项或基于类的组件中是被动的。

正如您所看到的，我希望得到的是 ul 元素中的两个 li 元素（2个元素，因为我用数据循环data.info v-for和data.info有两个简单的元素）;但相反，我得到了上面的错误。显然，我在这里缺少知识，但我不知道它是什么。如果你能帮我弄明白的话，我会非常感激。

提前致谢。

Answer 1

您的代码可以与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
});

组件内部的组件VueJS

1 个答案: