I have a Vue drop down menu with dynamically populated items from JSON data.
The click event updates the main 'dataSet' with the last selection to render this as a label, then sets the openDropDown variable to false to close the menu.
<drop-menu inline-template>
<span v-on:click='openDropDown=!openDropDown' :class="{'active': openDropDown}">{{ dataSet.last.name}}</span>
<div v-if='openDropDown' v-cloak class='menu' v-model="openDropDown">
<div v-for='data in dataSet'>
<div class="menu-item" v-on:click='itemClicked(data)' :class="{ 'selected': data.name == dataSet.last.name}">{{data.name}}</div>
</div>
</drop-menu>
The list is quite long, so it is a scrollable menu.
Here is the component Vuejs related
(function(){
Vue.component('dropMenu', {
data: function() {
return {
openDropDown: false,
dataSet: {
"last": {"name":"Jon", "number":33},
"names":[
{"name":"Jon", "number":33},
{"name":"Bob", "number":32},
{"name":"Chris", "number":31},
{"name":"Matt", "number":30},
{"name":"Eli", "number":34},
{"name":"Ron", "number":35},
{"name":"John", "number":36},
{"name":"Karl", "number":37},
{"name":"Carl", "number":38}
]
}
};
},
methods: {
itemClicked: function(item){
this.dataSet.last.name = item.name
this.dataSet.last.number = item.number
this.openDropDown = false
}
}
});
})();
When you make a selection at the bottom of the list, which is originally hidden when the menu opens, this item is styled to represent it is selected and the dropdown closes.
I'm trying to have the selected item be in view at the top of the menu when the list is open, but keeping the items in order and just using something like a jump to item functionality.
When you open the menu, is there a way to have the selected item show at the top of the menu?
