Notice: The Monaca & Onsen UI Community Forum is shutting down.
For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.
Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.
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>