Nesting component in a component

Question

How can I properly use another component within a component? it shows warning of syntax error after I adding both

import Item-card from './components/Item-card.vue';

and

components::{
  'item-card':Item-card
},

to replace the template as following:

<template>
  <div class="item-card">
    <item-card v-for="product in products"></item-card>
  </div>
</template>

<script>
  import Item-card from './components/Item-card.vue';
  export default {
    components:{
      'item-card':Item-card
    },
    data(){
      return{
        products:''
      }
    },
    mounted(){
      ProductEvent.$on('products', function (products){
        this.products = products
      }.bind(this));
    }
  }
</script>

UPDATE1

error code after changing

import Item-card from './components/Item-card.vue';

into

  import itemCard from './components/Item-card.vue';
  export default {
    components::{
      'item-card':itemCard
    }....,

ERROR in ./~/buble-loader!./~/vue-loader/lib/selector.js?type=script&index=0!./resources/assets/js/components/Item-list.vue Module build failed: SyntaxError: Unexpected token (10:13) at Parser.pp$4.raise (C:\xampp\htdocs\soyegg\node_modules\buble\node_modules\acorn\dist\acorn.js:2221:15) at Parser.pp.unexpected (C:\xampp\htdocs\soyegg\node_modules\buble\node_modules\acorn\dist\acorn.js:603:10) at Parser.pp$3.parseExprAtom (C:\xampp\htdocs\soyegg\node_modules\buble\node_modules\acorn\dist\acorn.js:1822:12) at Parser.parseExprAtom (C:\xampp\htdocs\soyegg\node_modules\buble\dist\buble.umd.js:656:26) at Parser.pp$3.parseExprSubscripts (C:\xampp\htdocs\soyegg\node_modules\buble\node_modules\acorn\dist\acorn.js:1715:21) at Parser.pp$3.parseMaybeUnary (C:\xampp\htdocs\soyegg\node_modules\buble\node_modules\acorn\dist\acorn.js:1692:19) at Parser.pp$3.parseExprOps (C:\xampp\htdocs\soyegg\node_modules\buble\node_modules\acorn\dist\acorn.js:1637:21) at Parser.pp$3.parseMaybeConditional (C:\xampp\htdocs\soyegg\node_modules\buble\node_modules\acorn\dist\acorn.js:1620:21) at Parser.pp$3.parseMaybeAssign (C:\xampp\htdocs\soyegg\node_modules\buble\node_modules\acorn\dist\acorn.js:1597:21) at Parser.pp$3.parsePropertyValue (C:\xampp\htdocs\soyegg\node_modules\buble\node_modules\acorn\dist\acorn.js:1998:89) @ ./resources/assets/js/components/Item-list.vue 4:18-103 @ ./resources/assets/js/app.js

Saurabh Saurabh · Accepted Answer · 2016-12-10T14:18:35

Try following:

<script>
  import itemCard from './components/Item-card.vue';
  export default {
    components:{
      'item-card': itemCard
    },
    data(){
         .........
         .........

Also check the file name if it is typed correctly.

Nesting component in a component

1 Answers