I am trying to preset the value in a list of objects.

In the docs you say that you can use value
<v-select :value.sync="syncedVal" :options="countries">`

This is working in arrays but. How can I preset the value in this case?
{value: "CA", label: "Canada"}

Most of the cases We need to preset by id (value).

Thank you!

I get this error when trying to use vue-select:

[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

<template>
  <v-select :value.sync="selected" :options="options"></v-select>
</template>

import vueSelect from 'vue-select'

export default {
  components: {
    vueSelect
  },

  data: function () {
    return {
      selected: null,
      options: [50, 100, 250, 500]
    }
  }
}

Any idea?

How to use it in AMD(requireJS). my project not use webpack, thank you

This issues for using 1.2.0 in safari browser + webpack
and chrome work well.

Would be great to have an option to disallow typing and just picking from the dropdown. Two reasons:

• For small option-sets typing isn't really needed
• The additional space required for typing an additional option, when one is already selected, makes the widget too large in some tight layouts

I'm not quite sure where I'm going wrong with this. I'm using vue-resource to gather some objects from the server, map them into the required format for vue-select (value/label keys), then set the binded value.

In my view:

<v-select :value.sync="form.primary_game" :options="games"></v-select>

My ready method:

this.$http.get('/api/game')
    .then(response => {
        this.games = _.map(response.data.data, item => this.filterGame(item));

        let g = this.findGame(this.user.primary_game);
        console.log(g);
        this.form.primary_game = g;
        console.log(this.form.primary_game);
     })
     .catch(function(response) {
        alert(response);
    });

filterGame is nothing but a quick remapping:

return {
    value: game.id,
    label: game.name
}

At first I thought it was an issue with form.primary_game not being updated within the Promise, but both console dumps spit out the same Object. Then I inspect the variable using Vue Devtools, it's just null, like I set in my data array.

I tried setting the default value to a hardcoded Object, and it works for a split second before switching back to null, assumingly being overridden. However, the form.primary_game variable is set properly this time.

<v-select :value.sync="{value:1,label:'test'}" :options="games"></v-select>

Am I dumb and doing something wrong here or is it simply not binding properly?

Hi,

onChange callback doesn't work with multiple select after the first selection because

watch: {
      value(val, old) {
        this.onChange && val !== old ? this.onChange(val) : null
      },

not detect change : val === old

I think watch function called too late because old is not the good old value

This is something pretty common with tag editors - letting new items be added if it doesn't exist. On that note, it'd be nice to have the option to not show the dropdown until you start typing something, so only relevant results show right away, as opposed to all results.

Hope you using typescript. Can you please create some example code and share it. may i know how to use this in angular2?

The dropdown icon is not shown if you don't have Font Awesome installed.

If you're using Bootstrap 4 the options are not rendered correctly.

npm run build
ERROR in static/js/0.251db70fdbefa732f7e4.js from UglifyJs
Unexpected token punc «(», expected punc «:» [./~/vue-select/src/mixins/pointerScroll.js:9,0]
whta?

If there's not enough room for the dropdown to appear below the search input, it should appear above.

When i run this

npm install sagalbot/vue-select -S

It installed 1.0.2 but I found 1.0.5 is released.

Awseome potential but lack of essential features such as remote loading and rich select display :-)
Keep up the good work though.

The safari console will report

SyntaxError: Unexpected token '='. Expected a ')' or a ',' after a parameter declaration.

point to src/mixin/ajax.js toggle method, if I fixed that with things like following

toggleLoading(toggle) {
            if (toggle == undefined || toggle == null) {
                return this.loading = !this.loading
            }
            return this.loading = toggle
        }

Some other error will raise like issue #57 .

So if I use vue-select in the project make the website didnt work in iPhone and mac safari browser

Hi,
is it possible to use it in a stand alone way ? I would like to reference js and css in an html page and be up and running.

When the textbox becomes two rowed , it doesn't respond when clicking on some whitespaces , usually at the left side.

May i suggest adding nested submenus like those in selectivity?

Hello,

any luck for bower support?

is it possible with you component?

When multiple options (or a single lengthy option) are selected, the tags overflow outside the .dropdown div.

The tags also push the search input outside the .dropdown binding box.

To recreate:

• set multiple=false
• select a value
• press delete while focussed in search box

Delete should be setting the value to null in this case, rather than popping the last item in the array. Need to add a regression test for this.

It's possible to lose track of the typeahead pointer when filtering items. If you use the arrows to go below a specific option, then type that option into the search box, the typeahead highlight will not be visible, because it's outside the scope of the filtered list.

The pointer should adjust to be contained within the filtered list.

If vue-select is to mimic how native select or select2 works, the items should keep scrolling as the keyboard arrows are kept pressed, so I suggest using keydown.

Hi, May you please register vue-select in bower.io ?

http://bower.io/docs/creating-packages/#register

Thanks

Thanks for the software, it functionally is working great. However, I have an inline form and have two issues - both display issues - the input box does not seem to work inline, and the dropdown does not layer on top of other elements.

First - the inline box - this is what the select box looks like (seems to be outside the inline form):

That code is:
<template v-for="phone in phones">
<div class="row">
<div class="col-md-11">
<label class="sr-only" for="phone.number">Phone Number:</label>
<div class="input-group">
<div class="input-group-addon">Phone Number:</div>
<input class="form-control" v-model="phone.number" type="text" placeholder="123-123-1234"/>
<div class="input-group-addon">Phone Type:</div>
<v-select class="form-control" multiple :value.sync="phone.type" :options="ptypes"></v-select>
</div> [etc...]

Second, this is what it looks like when you click in the drop down, when it is above another element (in this case the element is dynamically created - i.e. another row of phone input, and the next line is the email input):

i install vue-select via npm and then i have a problem with my resource stop working. i am using laravel elixer. can you please the installation process for someone using laravel with vue?

Hi friends, v-select don't show options, i don't know the reason. The select appear, but empty!

My source:

I add custom tag to my html file:

<v-select></v-select>

crud.js, main file compile with browserify

template vue-select.vue

It would be handy to remove already selected items from the list in case of a similar search.

Hi,

Thanks for creating this vue plugin! I was wondering if there was a recommended method to use due-select for tags without a drop-down element?

Thanks!

Help: I'm getting this error on my project I cant get it to work. Any one?

[23:53:23] gulp-notify: [Laravel Elixir] Browserify Failed!: Couldn't find preset "stage-2" relative to directory "/home/nacr/Code/App/node_modules/vue-select" while parsing file: /home/nacr/Code/App/node_modules/vue-select/src/mixins/pointerScroll.js
{ Error: Couldn't find preset "stage-2" relative to directory "/home/nacr/Code/App/node_modules/vue-select" while parsing file: /home/nacr/Code/App/node_modules/vue-select/src/mixins/pointerScroll.js
    at /home/nacr/Code/App/node_modules/babel-core/lib/transformation/file/options/option-manager.js:395:17
    at Array.map (native)
    at OptionManager.resolvePresets (/home/nacr/Code/App/node_modules/babel-core/lib/transformation/file/options/option-manager.js:387:20)
    at OptionManager.mergePresets (/home/nacr/Code/App/node_modules/babel-core/lib/transformation/file/options/option-manager.js:370:10)
    at OptionManager.mergeOptions (/home/nacr/Code/App/node_modules/babel-core/lib/transformation/file/options/option-manager.js:330:14)
    at OptionManager.addConfig (/home/nacr/Code/App/node_modules/babel-core/lib/transformation/file/options/option-manager.js:232:10)
    at OptionManager.findConfigs (/home/nacr/Code/App/node_modules/babel-core/lib/transformation/file/options/option-manager.js:436:16)
    at OptionManager.init (/home/nacr/Code/App/node_modules/babel-core/lib/transformation/file/options/option-manager.js:484:12)
    at File.initOptions (/home/nacr/Code/App/node_modules/babel-core/lib/transformation/file/index.js:223:65)
    at new File (/home/nacr/Code/App/node_modules/babel-core/lib/transformation/file/index.js:140:24)
  filename: '/home/nacr/Code/App/node_modules/vue-select/src/mixins/pointerScroll.js',

Pressing up or down arrows should open the .dropdown if it's currently closed. return keyups should not trigger a selection when the menu is closed, but it should open it.

When list has a scroll and you navigate by keyboard arrows, it doesn't scroll the list with the items when last items have been reached and scrolling is required to see more items.

Hey, thanks for this nice project.

I was looking for documentation at the website, but it's broken in all browsers I've tried. It seems the issue is that some content is served over http, which the browser blocks.

Hi there

When I run gulp I got this:
[22:27:27] gulp-notify: [Laravel Elixir] Browserify Failed!: Couldn't find preset "stage-2" relative to directory "/var/www/crm/node_modules/vue-select" while parsing file: /var/www/crm/node_modules/vue-select/src/mixins/pointerScroll.js

Any ideas what it might be?

Thanks in advance

Is right to left feature supported?

I need to be able to style options differently - e.g. some options should be listed in italics and/or with icons. Perhaps add another optional attribute to the option-object ? E.g. 'label', 'value' and 'classes' ?

I'm running webpack and this is the error I'm getting. I don't know if it is a babel error or vue-select error

[ERROR in ./~/babel-loader!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-select/src/components/Select.vue
Module build failed: Error: Couldn't find preset "stage-2" relative to directory "/Users/rodrigo/work/src/gitlab.com/rodzzlessa24/hairbuddy/webapp/node_modules/vue-select"
    at /Users/rodrigo/work/src/gitlab.com/rodzzlessa24/hairbuddy/webapp/node_modules/babel-core/lib/transformation/file/options/option-manager.js:413:17
    at Array.map (native)
    at OptionManager.resolvePresets (/Users/rodrigo/work/src/gitlab.com/rodzzlessa24/hairbuddy/webapp/node_modules/babel-core/lib/transformation/file/options/option-manager.js:405:20)
    at OptionManager.mergePresets (/Users/rodrigo/work/src/gitlab.com/rodzzlessa24/hairbuddy/webapp/node_modules/babel-core/lib/transformation/file/options/option-manager.js:388:10)
    at OptionManager.mergeOptions (/Users/rodrigo/work/src/gitlab.com/rodzzlessa24/hairbuddy/webapp/node_modules/babel-core/lib/transformation/file/options/option-manager.js:347:14)
    at OptionManager.addConfig (/Users/rodrigo/work/src/gitlab.com/rodzzlessa24/hairbuddy/webapp/node_modules/babel-core/lib/transformation/file/options/option-manager.js:248:10)
    at OptionManager.findConfigs (/Users/rodrigo/work/src/gitlab.com/rodzzlessa24/hairbuddy/webapp/node_modules/babel-core/lib/transformation/file/options/option-manager.js:454:16)
    at OptionManager.init (/Users/rodrigo/work/src/gitlab.com/rodzzlessa24/hairbuddy/webapp/node_modules/babel-core/lib/transformation/file/options/option-manager.js:502:12)
    at File.initOptions (/Users/rodrigo/work/src/gitlab.com/rodzzlessa24/hairbuddy/webapp/node_modules/babel-core/lib/transformation/file/index.js:243:89)
    at new File (/Users/rodrigo/work/src/gitlab.com/rodzzlessa24/hairbuddy/webapp/node_modules/babel-core/lib/transformation/file/index.js:159:72)
    at Pipeline.transform (/Users/rodrigo/work/src/gitlab.com/rodzzlessa24/hairbuddy/webapp/node_modules/babel-core/lib/transformation/pipeline.js:49:16)
    at transpile (/Users/rodrigo/work/src/gitlab.com/rodzzlessa24/hairbuddy/webapp/node_modules/babel-loader/index.js:14:22)
    at Object.module.exports (/Users/rodrigo/work/src/gitlab.com/rodzzlessa24/hairbuddy/webapp/node_modules/babel-loader/index.js:88:12)
 @ ./~/vue-select/src/components/Select.vue 3:17-113](url)

And here is my webpack config file

module.exports =  {
  entry: [
    './src/main.js'
  ],
  output: {
    path: "dist/js",
    publicPath: "dist/",
    filename: "app.js"
  },
  watch: true,
  module: {
    loaders: [
      {
        test: /\.js$/,
        // excluding some local linked packages.
        // for normal use cases only node_modules is needed.
        exclude: /node_modules|vue\/src|vue-router\//,
        loader: 'babel'
      },
      {
        test: /\.scss$/,
        loaders: ['style', 'css', 'sass']
      },
      {
        test: /\.vue$/,
        loader: 'vue'
      }
    ]
  },
  babel: {
    presets: ['es2015'],
    plugins: ['transform-runtime']
  },
  resolve: {
    modulesDirectories: ['node_modules']
  }
}

When you click on the arrow in the dropdown, the dropdown does not activate. When you click on the input area, it does.

Currently the version is 1.0.5, would you mind fixing the version and throwing up a new release?

#44

@sagalbot

when run npm install sagalbot/vue-select npm doesn't find the repository :(

Another thing: how use with vue-validator?

I'm trying to append multiple items to a list.
The issue is that I can select items(also added to selected array), but it does append only the first item to the input. Also removing isn´t possible. See image and code below

<template>
<div class="form-group">
   <label class="col-sm-2 control-label">Name employee</label>
  <div class="col-sm-10">
     <v-select :value.sync="selected" :options="options" multiple></v-select>
  </div>
</div>
</template>

<script>
import vSelect from 'vue-select'

export default {
  components: {
    vSelect
  },
  data: function () {
    return { 
      selected: null,
      options: ['foo', 'bar', 'baz']
    }
</script>

dist/build.js is 365KB big. Is it normal or there is something wrong. I assume a vue plugin should not be much bigger than vue itself.

There should be an API for limiting the number of selections a user can select.

Is there any support for themes?

And if so how can it be done?

tks

Would be nice to have a license in the repo.

It looks strange that when you click (not validate) on a list item the search input isn't removed.

ie. search for "Fra", click on "France", result:

[France ×] Fra

EDIT: Furthermore, when you validate at that stage, the resulting tree is empty.

Really nice anyway, looking forward to use it.

This would give us a chance to add new options in the parent. Would you consider dispatching some events from this component? If so then do you have any conventions I should consider?