Answer the question
In order to leave comments, you need to log in
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>
{
"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
}
Answer the question
In order to leave comments, you need to log in
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question