v-ons-lazy-repeat error: "createItemContent" must return an instance of Element

walfin

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>