v-ons-lazy-repeat错误：“createItemContent”必须返回Element的实例

Question

我的代码中出现此错误，我不知道出了什么问题。我在https://onsen.io/v2/api/vue/v-ons-lazy-repeat.html测试区域测试了类似的东西并且它工作但是当我把它放在我自己的代码中时它不起作用。无论我试图做什么，它都继续投掷“createItemContent”必须返回Element的实例，但onsenui页面中的示例代码只显示我必须将元素代码放在新Vue对象的“模板”中。

这是我的组件的代码：

<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>