Выпадающее меню Vue.js с возможностью перехода к последнему выбранному элементу - PullRequest
0 голосов
/ 01 сентября 2018

У меня есть раскрывающееся меню 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
       }
    }
   });
})();

Когда вы делаете выбор в нижней части списка, который изначально скрыт при открытии меню, этот элемент оформляется так, что он выбран, а раскрывающийся список закрывается.

Я пытаюсь, чтобы выбранный элемент отображался в верхней части меню, когда список открыт, но я держу элементы в порядке и просто использую что-то вроде функции перехода к элементу.

При открытии меню можно ли отобразить выбранный элемент в верхней части меню?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...