S
S
SPART4K632021-07-19 23:17:44
Vue.js
SPART4K63, 2021-07-19 23:17:44

How to fix Failed to mount component: template or render function not defined error?

Good afternoon. I'm using nuxt, I needed vue virtual scroll, this package is suitable for me:
https://www.npmjs.com/package/vue-virtual-collecti...

When connecting it, it's almost exactly the same ( Except changed the input data to the VirtualCollection component) an error occurs:
vue.runtime.esm.js?2b0e:619 [Vue warn]: Failed to mount component: template or render function not defined.

found in

--->
at components/card/product/index.vue
at pages/catalog/index.vue

at layouts/default.vue


My component:

<template >
    <div>
          <VirtualCollection :cellSizeAndPositionGetter="cellSizeAndPositionGetter" :collection="startData" :height="500" :width="330">
              <div slot="cell" slot-scope="props">{{props.title}}</div>
          </VirtualCollection>
      </div>
    

</template>

<style scoped>
  .scroller {
    height: 100%;
  }
</style>

<script>
  import axios from 'axios';

  import VirtualCollection from 'vue-virtual-collection'
  

  export default {
    components: {
        VirtualCollection

    },
    props: ['startData'],
    data() {
      return {
        page: 10
      }
    },
    methods: {
      routeCard(id) {
        console.log(id)
        this.$router.push({ path: `/catalog/${id}`  })
      },
            cellSizeAndPositionGetter(item, index) {
                // compute size and position
                return {
                    width: 100,
                    height: 150,
                    x: (index % 2) * 110,
                    y: parseInt(index / 2) * 160
                }
            }
      },
    
  }
</script>


JSON like this:
{
    "id": 1,
    "brand": "adidas",
    "title": "Кроссовки Nike LeBron 18 Low",
    "price": 13990,
    "photos": ["https://imgur.com/0PkewHu.jpg", "https://imgur.com/FryhBEJ.jpg", "https://imgur.com/TJNxAuK.jpg", "https://imgur.com/m0FDoHI.jpg"],
    "size_format": "US",
    "sizes": [
      {
        "id": 1,
        "size_ru": 42,
        "size": 6,
        "stock": 4
      },
      {
        "id": 2,
        "size_ru": 44,
        "size": 7,
        "stock": 1
      },
      {
        "id": 3,
        "size_ru": 46,
        "size": 8,
        "stock": 2
      },
      {
        "id": 4,
        "size_ru": 40,
        "size": 2,
        "stock": 3
      },
      {
        "id": 5,
        "size_ru": 38,
        "size": 5,
        "stock": 4
      },
      {
        "id": 6,
        "size_ru": 35,
        "size": 3,
        "stock": 4
      }
    ],
    "count": 34,
    "colors": [
      { 
        "id": 1,
        "color_name": "Черный/Fierce",
        "image_link":"https://imgur.com/eRcSc6H.jpg",
        "images_carousel": ["https://imgur.com/PjAeziy.jpg", "https://imgur.com/gpurQYU.jpg", "https://imgur.com/4LxuoLe.jpg", "https://imgur.com/vAoXYnl.jpg"]
      },
      { 
        "id": 2,
        "color_name": "Purple/Racer",
        "image_link":"https://imgur.com/eRcSc6H.jpg",
        "images_carousel": ["https://imgur.com/676zjl6.jpg", "https://imgur.com/qTBxEOf.jpg", "https://imgur.com/ojxjCd4.jpg", "https://imgur.com/Osiwf0a.jpg"]
      },
      { 
        "id": 3,
        "color_name": "Blue/Белый",
        "image_link":"https://imgur.com/warOvJg.jpg",
        "images_carousel": ["https://imgur.com/lttVTKL.jpg", "https://imgur.com/4IzC7ZQ.jpg", "https://imgur.com/Wu3CAP8.jpg", "https://imgur.com/9LMmXeo.jpg"]
      },
      { 
        "id": 4,
        "color_name": "Red/Красный",
        "image_link":"https://imgur.com/Z3C6BTz.jpg",
        "images_carousel": ["https://imgur.com/QYLiKbK.jpg", "https://imgur.com/CH57RxQ.jpg", "https://imgur.com/u0OulRF.jpg", "https://imgur.com/hlwykwd.jpg"]
      }
    ],
    "characters": {
      "appointment": "Баскетбольная обувь",
      "gender": "Мужской",
      "color": "Черный/Fierce Purple/Racer Blue/Белый",
      "model": "CV7562-003",
      "age": "Взрослые",
      "countrie": "Вьетнам",
      "specials": ["Легкий мягкий язычок", " Бесшовные накладки", "Мягкий бортик", "Резиновая подметка с ромбовидными вырезами"]
    },
    "image": "https://imgur.com/0ITSiim.jpg",
    "new": true
  }


Etc.

Please tell me what is wrong

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question