Question

我有一个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
       }
    }
   });
})();

当您在列表底部进行选择时（菜单打开时该选项最初是隐藏的），该项目的样式设置为代表已被选中，并且下拉菜单关闭。

当列表打开时，我试图在菜单顶部显示选定的项目，但要使项目保持顺序并仅使用诸如跳转到项目功能之类的方法。

打开菜单时，是否可以在菜单顶部显示所选项目？

Vue.js下拉菜单具有跳转至上一个选定项目的功能

0 个答案: