Navigation

    Monaca & Onsen UI
    • Login
    • Search
    • Tags
    • Users
    • Blog
    • Playground
    1. Home
    2. walfin
    W
    • Flag Profile
    • Profile
    • Following
    • Followers
    • Blocks
    • Topics
    • Posts
    • Best
    • Groups
    Save
    Saving

    walfin

    @walfin

    0
    Reputation
    1
    Posts
    246
    Profile views
    0
    Followers
    0
    Following
    Joined Last Online

    walfin Follow

    Posts made by walfin

    • 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>
      
      posted in Onsen UI
      W
      walfin