У меня есть раскрывающееся меню Vue с динамически заполняемыми элементами из данных JSON.
Событие click обновляет основной «набор данных» последним выбором, отображающим его как метку, а затем устанавливает переменную openDropDown
в false
, чтобы закрыть меню.
<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>
Список довольно длинный, поэтому это прокручиваемое меню.
Вот компонент, связанный с Vuejs
(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
}
}
});
})();
Когда вы делаете выбор в нижней части списка, который изначально скрыт при открытии меню, этот элемент оформляется так, что он выбран, а раскрывающийся список закрывается.
Я пытаюсь, чтобы выбранный элемент отображался в верхней части меню, когда список открыт, но я держу элементы в порядке и просто использую что-то вроде функции перехода к элементу.
При открытии меню можно ли отобразить выбранный элемент в верхней части меню?