terryz / v-selectmenu

SelectMenu for Vuejs, A simple, easier and highly customized menu solution

Hi there

I am TerryZ, a game player who writes code

Github metrics

Components

Vue 3 series

v-page • v-dropdown • v-region • v-selectpage • v-dialogs

Documentation for the Vue 3 series component: docs-vue3

Vue 2 series

Name	Version
v-dropdown
v-region
v-selectpage
v-selectmenu
v-page
v-suggest
v-dialogs
v-tablegrid
v-uploader
v-gallery
v-playback

Documentation for the Vue 2 series component: docs-vue

jQuery series Plugins

SelectPage • SelectMenu • bDialog • bPage • bTabs

Activity charts

v-selectmenu's Issues

Select Menu doesn't seem to update if data modifies

I'm lazying loading the contents and the drop down doesn't seem to rebind the data source.

v-selectmenu not working in v-dialogs

I use v-selectmenu out of v-dialogs it working well, but i use it in v-dialogs modal it not working

Getting the specific row selected

How can I get information about a specific row/menu item a user has selected? I've tried the following:

<v-selectmenu :data="menu" :regular="true" @values="selected">
     <button>Select</button>
 </v-selectmenu>`

methods: {
     this.selected(a) {
            console.log(a);
      }
 }

But that doesn't seem to work. I've also tried in the data property itself:

{
    content: 'Dashboard',
    callback : this.selected('dashboard')
  }

But I can't get the callback to pass the argument to the method (the callback stops working all together when you try to pass in an argument).

I just want to be able to figure out what row/menu item a user selected. How can I do that?

Is there a way to customize styles for menu headers?

I want to add customized colors to headers menu but I couldn't find an example in the demo page. And also, is there a way to add horizontal scroll with limited width?

Cannot set default value

Hi, when i editing form, i need to set default value of this select box. But it's not working

<v-selectmenu :data="list" class="form-control" v-model="value">
</v-selectmenu>

data () {
    return {
      value: 1,
      list: [
        {id: 1, name: 'Chicago Bulls', desc: '芝加哥公牛'},
        {id: 2, name: 'Cleveland Cavaliers', desc: '克里夫兰骑士'}
      ]
    }
}

CALLBACK METHODS

please, could you make callback methods using "this.methods"?

Bug: The `@values` event is not sent after the v-selectmenu component is re-rendered

Description of bug

I have an instance of v-selectmenu that is toggled on/off using the Vuejs v-if directive. I also listen to the @values event on this component.

<v-selectmenu v-if="condition" @values="onValuesEvent" ...

If the component is hidden and re-rendered when condition changes from true to false to true, the @values event is no longer emitted!

multiple 开启时，values会触发两次

advanced模式中 multiple开启时，当选中任意个数项目时，values会触发两次。但如果清空，会只触发一次。
在https://codepen.io/terry05/pen/WNeEZRd 示例中，将最后一个例子上挂上@values函数，并在函数中加console.log 即可观察到该现象。

Keyboard navigation not working without search bar

Hi,

When the search bar is disabled (:query="false"), I'm unable to navigate through the options using the keyboard, which is often done by our power users.

Thanks!

Setting regular to true doesn't respect key-field or show-field

Data values cleared when "Select All" chosen twice

Steps to Reproduce:

1. Create an advanced menu with the multiple choice option.
2. Choose menu and in "Select Option" popup, click the Select All button (checkbox) twice or more times.
3. Clear the selections (trash can).
4. All data values in the list will disappear resulting in the "not found" message.

Just started to look into this, but just thought I would post it to let you know.

Button text is not being updated

After selecting an option button text should be changed. It always shows Select an option

<v-selectmenu v-model="state.selectedChatFilter"
                          :regular="true"
                          :data="chatFilters"></v-selectmenu>

chatFilters: [
	{name: 'Active Chats', id: 'activeChats', content: 'Active Chats'},
	{name: 'Closed Chats', id: 'closedChats', content: 'Closed Chats'},
	{name: 'All Chats', id: 'allChats', content: 'All Chats'}
]
selectedChatFilter = 'activeChats'

Also if I remove key content from list, text (Active Chats/Closed Chats/All Chats) is not being displayed in options

关于样式修改

标签目前是动态适应的，怎么设置成固定长度？选项的背景样式怎么设置？

Select All in Advanced Menu with Groups does partial selection only

Hi,

When I loaded a group data set, clicking the "select all" checkbox selects only the items of the active group, not every item in the menu. Is there a way to get everything selected (rather than forcing end-users to enter each group first)?

If I have an event like 'Select All clicked', I could check the number of items picked against the total number of items in the menu and cater for the difference but here I cannot hook into a 'Select all clicked' event/call.

Thank you!

高级模式下如何多级菜单的支持

高级模式下如何多级菜单的支持

如何默认选中

如何默认选中

初始化出问题了

代码：

使用的时候可以使用，但是会报错
希望大佬有空解答一下

hiding the search bar

Is there a way to hide the search bar in dropdown menu?

selectmenu UI issue - menu always re-opens when you trying to close it via button

When you click the button to open a menu, that works as intended. But when you click the same button to close a menu, the menu will close briefly (its display is set to none), but then it immediately re-opens again. I've posted a gif below to illustrate the issue better:

https://makeagif.com/i/Ewp3vx

This is typically not the intended behavior of such menus. When the menu is open, and you click the button, the menu should close; it shouldn't re-open.

Call a method in the 'callback' option?

Is there any way to call a method inside the 'callback' option? For example:

{
     content:'Click Here!',
     callback : this.callMethod(),
}

My larger question is: how is one supposed to dynamically change the values in the select? For example: dynamically change whether an option is disabled or not.

Great looking component by the way!

Needs small Accessibility improvements

A couple of adjustments could be made to improve accessibility (a11y):

1. The search input in the dropdown needs to have a label and or aria tags (even if not visible)
2. The dropdown header (sm-header) should probably not be an H3, best to use a class instead, since modifying the template is not an option for that item. Have an H3 causes conflicts with the rest of the document hierarchy.

I am using the WAVE tool for A11Y
https://wave.webaim.org/

Customize Header

could i change your header v-selectmenu "select an option" ?, i wanna make some customization in header. please can you make it customizeable?

v-select emitting `input` on load

The component is emitting an input event when it loads, which triggers event handlers despite there being no change in model data.

add item problem

my system setting is here:

vue.js version: vue2
using library:
1. vue-cli
2. bootstrap-vue

and my source code

<b-col sm="2">
          <v-selectmenu 
            :data="app_list"
            language='en'
            :multiple='true'
            key-field="id"
            show-field="name"
            v-model="app_value"
            title='Select Your App'
            ref='test'>
          </v-selectmenu>        
</b-col>
<script>
import vSelectMenu from 'v-selectmenu'
Vue.use(vSelectMenu);

export default {
    name : 'App_test',  
    props: ['sessionKey'],
    components: {
    },
    data:function () {
       let options = qs.parse(location.search, { ignoreQueryPrefix: true })
       return {
           app_value:'',
           app_list:[
               {
                   id:0, name:'test',
               }
           ],
     },
    methods:{
        getDate(){
            let url = myUrl;
            let api_url = axios.get(url)
            api_url.then((response)=>{
                 for(let i =0; i<response.data.length; i++){
                        this.app_list.push({id:i+1, name:response.data[i]})
                 }
            })
        }
    }
}

However, v-selectmenu list can't update variable values.
looks like this.

result:

menu list: test
console.log(app_list):
[ { "id": 0, "name": "test" }, { "id": 1, "name": "HAI" }, { "id": 2, "name": "TEST012" } ]

How can i solve this problem?

Query/Search Not Working

This is a nice component. Great work! It looks like there is an issue with the query/search functionality, however. As soon as the user begins typing in the query/search field the below exception occurs.

You can check out a small project here I setup which demonstrates the issue. I also noticed the issue is occurring in your "Advanced menu" example.

Uncaught TypeError: Cannot read property 'name' of undefined
    at VueComponent.getRowText (v-selectmenu.js?34fb:1)
    at eval (v-selectmenu.js?34fb:1)
    at Array.filter (<anonymous>)
    at VueComponent.filter (v-selectmenu.js?34fb:1)
    at VueComponent.processKey (v-selectmenu.js?34fb:1)
    at invoker (vue.esm.js?efeb:2027)
    at HTMLInputElement.fn._withTask.fn._withTask (vue.esm.js?efeb:1826)

Concerning new version

Hi,

Does this latest code address all the current outstanding issues or are they being left open because they have not been tested yet?

npm install is not installing latest module

I tried running npm install today and it was not installing the module which has the latest commit. Is this because of package.json was not updated?

Long text options

Hi, if i have an option with long text, it will offset from browser. This need ability to wrap the text into multiple row.

Change the advanced_default for each instance

Hi, rather than all of the instances displaying "Select an option", I would like them to say "Select a Building" or "Select a Floor"

Is this possible? I can't see a way.

use router-links in NESTED menu?

You sent me this on reddit:

For custom router-link:

<v-selectmenu :data="list" type="regular" >
  <template #row="{ row }">
    <router-link :to="row.url" >{{row.name}}</router-link>
  </template>
</v-selectmenu>

But that doesn't seem to work if the menu is nested. Is it possible to use router-links for nested items?

Documentation?

Great UI and i gave u a star and forked this UI but where is the documentation? Simple things should be explained better, for example, how do i change "select an option" ? I don't want use i18n but i have too, and i can't change the title without language.js. I need a dynamic option to change the title but i couldn't find anything on GH (i am sure there is a way to do it). I don't want to use Vue.use(), how do i use it without "use()"? How can i use the {options} without use()? These small things should have examples or documentation. As i said, great UI(loved it), but not many will use it only because we don't have examples or documentation and running through the code to understand how it works some dev have no time. The documentation or good examples solve these problems. What i found is a short briefing and this is not enough to make the development enjoyable.

多选项全选问题

当多个选项的时候一个选项点击的全选按钮，另一个选项也点击了全选按钮，之前被选中的被覆盖了，处于未选中状态