v-ons-lazy-repeat error: "createItemContent" must return an instance of Element
-
Hi, I’m getting this error in my code and I don’t know what’s wrong. I tested something similar in the https://onsen.io/v2/api/vue/v-ons-lazy-repeat.html test area and it worked but when I put it in my own code it doesn’t work.
This is the code for my component:
<template> <v-ons-dialog :visible.sync="showDialog"> <v-ons-page> <v-ons-list> <v-ons-lazy-repeat :render-item="renderExistingItems" :length="selectedItems.length"></v-ons-lazy-repeat> </v-ons-list> <v-ons-modal :visible="loading"> <v-ons-progress-circular indeterminate></v-ons-progress-circular> </v-ons-modal> </v-ons-page> </v-ons-dialog> </template> <script> import Vue from 'vue'; export default{ name:'dialog_item', data(){ var self=this; return{ newItem:'', existingItems:[], renderExistingItems:index=>new Vue({ template:'<v-ons-list-item :key="index" @click="itemSelected(itemName)" tappable>{{itemName}}</v-ons-list-item>', data(){ return{ index:index }; }, computed:{ itemName(){ return this.index<self.selectedItems.length?self.selectedItems[this.index]:''; } }, methods:{ itemSelected(itemName){ self.$emit('itemSelected',itemName); self.newItem=''; self.showDialog=false; } } }), loading:false, showDialog:false }; }, computed:{ selectedItems(){ return !this.existingItems||this.existingItems.length<=0?[]:this.existingItems.filter(item=>item.trim().toLowerCase().includes(this.newItem.trim().toLowerCase())); } }, methods:{ addItem(){ var newItemTrim=this.newItem.trim(); if(newItemTrim===''){ this.$ons.notification.toast({message:'No item entered',timeout:2000}); return; } this.$emit('itemSelected',newItemTrim); this.newItem=''; this.showDialog=false; }, async show(){ this.loading=true; existingItems=await ...//some code to load the items from DB... this.loading=false; this.showDialog=true; }, itemSelected(itemName){ this.$emit('itemSelected',itemName); this.newItem=''; this.showDialog=false; } } }; </script>