Monaca Onsen UI Discord Chat Github Repo

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>