Make More Easy to Use :component-item

[ghost]

I'm trying to use :component-item property for five days, and it's very hard. I'm not using .vue files with components, but in a js file creating the components, the search i got it, but to show the results of search in two lines I didn't got. Please, make it easier to use, maybe allowing put the html (with text interpolation) in the: component-item property or another property, or calling a function that returns createElement array, or array of JSON object with a html property in every node, without having to use two components. After five days, second component (ItemTemplate) still doesn't work, it neither starts!, and the result of the search is working, but is showed like JSON. Please, make more easy to show the result of the search in html (two lines , title in bold above and description bellow the title.

First Example to Make It Easer (HTML on :component-item or another property) :

var searchMenu=Vue.component("spsearchmenu",{
	name:"spsearchmenu",            
	components:{"v-autocomplete":VAutocomplete.default},
	template:'',
	data()  {
		return {
		  item: "",
		  items: []
		}
	},
	methods: {                
		getLabel(item){
		   return item ? (item.name ? item.name : "") :"";
		},
		updateItems(text) {
			text=text.toLowerCase();
			this.$data.items = text ? menuList.filter(function(menu) {
				return ( (menu.name.toLowerCase().includes(text)) || (menu.description.toLowerCase().includes(text)) )
			}) : menuList;
			
		}
	}
});

Second Example to Make It Easer (createElemnt on :component-item or another property) :

var searchMenu=Vue.component("spsearchmenu",{
	name:"spsearchmenu",            
	components:{"v-autocomplete":VAutocomplete.default},
	template:'',
	data()  {
		return {
		  item: "",
		  items: []
		}
	},
	methods: {                
		getLabel(item){
		   return item ? (item.name ? item.name : "") :"";
		},
                createArrayElements(){
                         var arrayCreateElements=[];  
                        // programmer do your magic here to fill Array
                       return arrayCreateElements;
                },
		updateItems(text) {
			text=text.toLowerCase();
			this.$data.items = text ? menuList.filter(function(menu) {
				return ( (menu.name.toLowerCase().includes(text)) || (menu.description.toLowerCase().includes(text)) )
			}) : menuList;
			
		}
	}
});

Third Example to Make It Easer (JSON with specific properties on :component-item or another property) : properties: id: identifier to node and select operation title: short text showed for user to select (in bold) description: large text describing the item

var searchMenu=Vue.component("spsearchmenu",{
	name:"spsearchmenu",            
	components:{"v-autocomplete":VAutocomplete.default},
	template:'',
	data()  {
		return {
		  item: "",
		  items: []
		}
	},
	methods: {                
		getLabel(item){
		   return item ? (item.name ? item.name : "") :"";
		},
                createJSONArray(){
                        // programmer do your magic here to fill Array
                         //example of JSON
                         var arrayJSON=[
                                 {id:1,title:"Open",description:"Open a new file"},
                                 {id:2,title:"Save",description:"Save current file"},
                               ];  
                       return arrayJSON;
                },
		updateItems(text) {
			text=text.toLowerCase();
			this.$data.items = text ? menuList.filter(function(menu) {
				return ( (menu.name.toLowerCase().includes(text)) || (menu.description.toLowerCase().includes(text)) )
			}) : menuList;
			
		}
	}
});

[mykeels]

I think this could benefit from Vue's templates and scoped slots.

See example usage:

<v-autocomplete>
  <template scope="props">
     <div>
        <span>{{ props.item.name }}</span>
    </div>
  </template>
</v-autocomplete>

https://alligator.io/vuejs/scoped-component-slots/

[kaskar2008]

@jbsoftbr It seems like the maintainer will not answer this. That is why me and my friend have created a simple component to fulfill our needs. Maybe you'll find it usefull, check it out :)

[daverogers]

@kaskar2008 Not so sure about "simple" (your project has a lot of options, but most seem pretty useful) but I was able to implement your project successfully 😀 The slots are a huge help and I was able to actually customize my search box with pure-css and add a button, and no separate component for the suggestion items which is great 👍

[kaskar2008]

@daverogers Glad to hear it 😀