SPART4K63
@SPART4K63
front-end developer

Как исправить ошибку Failed to mount component: template or render function not defined?

Добрый день. Использую nuxt, появилась необходимость в vue virtual scroll, для меня подходит данный пакет:
https://www.npmjs.com/package/vue-virtual-collecti...

При подключении его почти точно так-же ( За исключением изменил входные данные в компонент VirtualCollection ) идет ошибка:
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


Мой компонент:

<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 такого вида:
{
    "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
  }


И т.д.

Подскажите пожалуйста в чем ошибка)
  • Вопрос задан
  • 101 просмотр
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы