Vue-multiselect: Vue 2.0 compatibilty issues [THREAD]

Created on 22 Jul 2016  ·  65Comments  ·  Source: shentao/vue-multiselect

2.0 enhancement

Most helpful comment

I was able to get it work with webpack and laravel-elixir-vue-2 by doing this:

import Multiselect from 'vue-multiselect/src/Multiselect.vue';
Vue.component('multiselect', Multiselect);

_UPDATE for beta 8_:

import Multiselect from 'vue-multiselect/lib/Multiselect.vue';
Vue.component('multiselect', Multiselect);

All 65 comments

As I’m now working on the 1.0 release (which will introduce some breaking changes, like deprecating .sync). I want it to also be the base for 2.0 release that would support Vue 2.0, which should be available shortly after publishing new docs for Vue 2.0.
Current progress can be seen here #57.

Will it support v-model for 2.0?

Sadly no. We don’t support v-model at all.

It would be nice to have the information on the project page and help documents of what Vue version is supported (and what is not).

If I understood correctly, the current version does not support Vue 2?

No, it doesn’t, but the work on v2.0.0 will begin shortly (I already have some drafts for it). I intend to support both Vue 1.0.x and 2.0, where support for 1.0 will be dropped after few months.
I will add the support information when Vue 2.0 is officially released.

Sounds good!

It would be nice to be able to follow the 2.0 development so that projects using Vue 2 beta could also use vue-multiselect (2.0 beta?) as well :)

I really wish I could do this faster but hey, we just have 24 hours a day.
The only exception to this rule is probably Evan, who seems to bend the time, considering how fast the development for Vue 2.0 goes. :D

Back to topic – there is a way easy way to make it support Vue 2.0, where probably the only tricky part is recreating the deprecated built-in filters.
Sadly I believe this approach is not good enough and I really wish to do it properly i.e. splitting parts of the template into stateless functional components (thus enabling injecting custom render functions inside!) and some other optimizations. All this not only to support Vue 2.0, but also make it a lot more effective!
I guess I will start with a simple beta and then work on the stable, much more refactored version.

Evan also has the luxury of bending the time 24 hours a day :)

Not trying to push this at all, just saying that when there is a version that is usable with Vue 2 (beta or final), it would be nice to have it on the repo as a branch to be able to test it, too. Iterating the refactor process seems to work quite well with Vuex 2, it might work here, too!

I guess so. :) I might find some time to provide one by the end of the week, but no promises on that!

@Uninen So I got a beta on the 2.0 branch, but didn’t had time to publish it to npm as @next version. I hope to do it today or tomorrow. You can already try it yourself (and even build it with npm run bundle) using the mentioned 2.0 branch.

Hi @shentao - it'd be really great if you could publish the @next version on npm!

@inanimatt Still working on it. I might publish it 'as is' today after work, if that’s fine with you.

@shentao super-fine! Sorry, the comment above suggested that you were going to do it last week so I thought you might've forgotten. If it's not ready, it's not ready. 😄

@inanimatt sorry that this is coming so late. I’ve been fighting with the tests (not yet finished). Anyway, you can try the beta version installing vue-multiselect@next.
It might be unstable though. Any feedback and issues would be much appreciated!

@shentao awesome! I'll give it a go :)

First impressions on switching over: works great! Since I'd already moved away from using sync (because of vuex), the transition was trivial; change :on-change to @update, :searchable="searchable" to :searchable="true" and :on-search-change="mySearchFunction" to @search-change="mySearchFunction", and finally debounced the search functions with lodash. Thanks so much for not dramatically changing the API :)

The only other place I got slightly tripped up very briefly was following the README example for tagging: it shows the addTag method, but misses the updateSelectedTagging method (though implementing it was pretty obvious).

Not noticed any instability yet, though to be fair it's been less than an hour. :)

@shentao Hello shentao, may I ask a question about v-model here?

As .sync is deprecated in Props in Vue 2.0, will you consider using v-modal to implement tow-way binding just like :selected.sync did. It makes our code cleaner and compatible with Vue 2.0 pattern: http://rc.vuejs.org/guide/components.html#Form-Input-Components-using-Custom-Events.

Otherwise we have to write some boiler-plate codes to catch the value update.

@JeOam Looks interesting! Thanks. Definitely, something I can implement. :)

I'm having trouble with the 2.0 beta and multiple mode. It seems to allow me to continuously add the same item over and over again instead of toggling like it's supposed to. I noticed that the mixin still adds a 'key' prop, which is used internally by Vue now in place of the old track-by, and so it seems like the value passed in via the key prop is not seen in vue-multiselect itself, which I think might be keeping it from determining that the same object is being selected and deselected.

I wanted to go ahead and test this myself, but I was unsuccessful at rebuilding the project. It barfs on UglifyJs for me.

This is already fixed in the beta release. You have to use the track-by prop instead of key on multiselect.

Have to add it to the readme.

Hi @shentao !

I am getting the following syntax error while trying to use [email protected] with with VueJS 2.0.X. I used the vue-cli's browserify-simple template to create the project.

SyntaxError: /Users/...../node_modules/vue-multiselect/lib/vue-multiselect.min.js: 'with' in strict mode (1:28627) while parsing file: /....../node_modules/vue-multiselect/lib/vue-multiselect.min.js

No sure if this is the appropriate place to post this query/issue.

Hey @fernsheldon!
No idea why this happens.
Can you try importing import { Multiselect } from 'vue-multiselect'?
That would make me know if there is a problem in the bundle or in the source files.

So this is what my script block looks like

<script>
import {Multiselect} from 'vue-multiselect';

export default {
  components: {
    Multiselect
    },
  data() {
    return {
        selected: null,
        options: ['list', 'of', 'options']
    }
  },
  methods: {
    updateSelected (newSelected) {
      this.selected = newSelected
    }
  }
}
</script>

But the error still persists...

Same for me.

/~/vue-multiselect/lib/vue-multiselect.min.js
Module build failed: SyntaxError: 'with' in strict mode

Well, as I don’t use with inside vue-multiselect it must be the result of Babel transpilation.
If you can, please try adding 'use strict' after importing vue-multiselect – that might help.

I will look into the transpilation process and see if I can make it output code work fine inside strict mode.

I'f you are intereseted, sending my package.json.

"devDependencies": {
    "bootstrap-sass": "^3.3.7",
    "gulp": "^3.9.1",
    "jquery": "^3.1.0",
    "laravel-elixir": "^6.0.0-9",
    "laravel-elixir-vue-2": "^0.2.0",
    "laravel-elixir-webpack-official": "^1.0.2",
    "lodash": "^4.14.0",
    "vue": "^2.0.0-rc.7",
    "vue-resource": "^0.9.3",
    "vue-router": "^2.0.0-rc.3",
    "vuex": "^2.0.0-rc.5",
    "vuex-router-sync": "^3.0.0"
  },
  "dependencies": {
    "font-awesome": "^4.6.3",
    "ioredis": "^2.3.0",
    "socket.io": "^1.4.8",
    "vue-animate": "0.0.4",
    "vue-i18n": "^4.4.0",
    "vue-multiselect": "^2.0.0-beta.3",
    "vue-socket.io": "^1.0.2"
  }

Same issue as well.. I tried this
import {Multiselect} from 'vue-multiselect'; "use strict";

Seems to happen only with browserify. Colleage uses webpack, there it works.
I've gut the same issue with gulp-browserify.

Strange... By default elixir uses webpack, so for me it fails with webpack.

I was able to get it work with webpack and laravel-elixir-vue-2 by doing this:

import Multiselect from 'vue-multiselect/src/Multiselect.vue';
Vue.component('multiselect', Multiselect);

_UPDATE for beta 8_:

import Multiselect from 'vue-multiselect/lib/Multiselect.vue';
Vue.component('multiselect', Multiselect);

Unfortunately, with this way, i get this error when compiling:

events.js:160
      throw er; // Unhandled 'error' event
      ^

SyntaxError: /Users/xxx/Sites/xxx/WWW/node_modules/vue-multiselect/src/multiselectMixin.js: Unexpected token (242:22)
  240 |       }
  241 |     },
> 242 |     'selected' (newVal: Object, oldVal: Object) {
      |                       ^
  243 |       this.value = deepClone(this.selected)
  244 |     }
  245 |   },
  at Parser.pp.raise (/Users/xxx/Sites/xxx/WWW/node_modules/babylon/lib/parser/location.js:22:13)
  at Parser.pp.unexpected (/Users/xxx/Sites/xxx/WWW/node_modules/babylon/lib/parser/util.js:91:8)
  at Parser.pp.expect (/Users/xxx/Sites/xxx/WWW/node_modules/babylon/lib/parser/util.js:83:33)
  at Parser.pp.parseBindingList (/Users/xxx/Sites/xxx/WWW/node_modules/babylon/lib/parser/lval.js:178:12)
  at Parser.pp.parseMethod (/Users/xxx/Sites/xxx/WWW/node_modules/babylon/lib/parser/expression.js:878:22)
  at Parser.pp.parseObjPropValue (/Users/xxx/Sites/xxx/WWW/node_modules/babylon/lib/parser/expression.js:799:10)
  at Parser.pp.parseObj (/Users/xxx/Sites/xxx/WWW/node_modules/babylon/lib/parser/expression.js:777:10)
  at Parser.pp.parseExprAtom (/Users/xxx/Sites/xxx/WWW/node_modules/babylon/lib/parser/expression.js:481:19)
  at Parser.pp.parseExprSubscripts (/Users/xxx/Sites/xxx/WWW/node_modules/babylon/lib/parser/expression.js:270:19)
  at Parser.pp.parseMaybeUnary (/Users/xxx/Sites/xxx/WWW/node_modules/babylon/lib/parser/expression.js:250:19)
  at Parser.pp.parseExprOps (/Users/xxx/Sites/xxx/WWW/node_modules/babylon/lib/parser/expression.js:180:19)
  at Parser.pp.parseMaybeConditional (/Users/xxx/Sites/xxx/WWW/node_modules/babylon/lib/parser/expression.js:157:19)
  at Parser.pp.parseMaybeAssign (/Users/xxx/Sites/xxx/WWW/node_modules/babylon/lib/parser/expression.js:120:19)
  at Parser.pp.parseObjPropValue (/Users/xxx/Sites/xxx/WWW/node_modules/babylon/lib/parser/expression.js:804:99)
  at Parser.pp.parseObj (/Users/xxx/Sites/xxx/WWW/node_modules/babylon/lib/parser/expression.js:777:10)
  at Parser.pp.parseExprAtom (/Users/xxx/Sites/xxx/WWW/node_modules/babylon/lib/parser/expression.js:481:19)
  at Parser.pp.parseExprSubscripts (/Users/xxx/Sites/xxx/WWW/node_modules/babylon/lib/parser/expression.js:270:19)
  at Parser.pp.parseMaybeUnary (/Users/xxx/Sites/xxx/WWW/node_modules/babylon/lib/parser/expression.js:250:19)
  at Parser.pp.parseExprOps (/Users/xxx/Sites/xxx/WWW/node_modules/babylon/lib/parser/expression.js:180:19)
  at Parser.pp.parseMaybeConditional (/Users/xxx/Sites/xxx/WWW/node_modules/babylon/lib/parser/expression.js:157:19)
  at Parser.pp.parseMaybeAssign (/Users/xxx/Sites/xxx/WWW/node_modules/babylon/lib/parser/expression.js:120:19)
  at Parser.pp.parseMaybeAssign (/Users/xxx/Sites/xxx/WWW/node_modules/babylon/lib/parser/expression.js:143:23)
  at Parser.pp.parseExpression (/Users/xxx/Sites/xxx/WWW/node_modules/babylon/lib/parser/expression.js:84:19)
  at Parser.pp.parseStatement (/Users/xxx/Sites/xxx/WWW/node_modules/babylon/lib/parser/statement.js:155:19)
  at Parser.pp.parseBlockBody (/Users/xxx/Sites/xxx/WWW/node_modules/babylon/lib/parser/statement.js:514:21)
  at Parser.pp.parseTopLevel (/Users/xxx/Sites/xxx/WWW/node_modules/babylon/lib/parser/statement.js:28:8)
  at Parser.parse (/Users/xxx/Sites/xxx/WWW/node_modules/babylon/lib/parser/index.js:96:17)
  at parse (/Users/xxx/Sites/xxx/WWW/node_modules/babylon/lib/index.js:45:47)
  at File.parse (/Users/xxx/Sites/xxx/WWW/node_modules/babel-core/lib/transformation/file/index.js:532:15)
  at File.parseCode (/Users/xxx/Sites/xxx/WWW/node_modules/babel-core/lib/transformation/file/index.js:617:20)
  at /Users/xxx/Sites/xxx/WWW/node_modules/babel-core/lib/transformation/pipeline.js:49:12
  at File.wrap (/Users/xxx/Sites/xxx/WWW/node_modules/babel-core/lib/transformation/file/index.js:579:16)
  at Pipeline.transform (/Users/xxx/Sites/xxx/WWW/node_modules/babel-core/lib/transformation/pipeline.js:47:17)
  at Babelify._flush (/Users/xxx/Sites/xxx/WWW/node_modules/babelify/index.js:27:24)
  at Babelify.<anonymous> (_stream_transform.js:118:12)
  at Babelify.g (events.js:286:16)
  at emitNone (events.js:86:13)
  at Babelify.emit (events.js:185:7)
  at prefinish (_stream_writable.js:478:12)
  at finishMaybe (_stream_writable.js:486:7)
  at endWritable (_stream_writable.js:498:3)
  at Babelify.Writable.end (_stream_writable.js:463:5)
  at DuplexWrapper.onend (/Users/xxx/Sites/xxx/WWW/node_modules/readable-stream/lib/_stream_readable.js:500:10)
  at DuplexWrapper.g (events.js:286:16)
  at emitNone (events.js:91:20)
  at DuplexWrapper.emit (events.js:185:7)
  at endReadableNT (/Users/xxx/Sites/xxx/WWW/node_modules/readable-stream/lib/_stream_readable.js:922:12)
  at _combinedTickCallback (internal/process/next_tick.js:74:11)
  at process._tickCallback (internal/process/next_tick.js:98:9)

@CinKon This shouldn’t happen anymore. Had to remove FlowType though. :(

@JeOam I know this is late but... vue-multiselect now supports v-model!
Sadly, this comes with some breaking changes (thankfully we are still in beta).

v2.0.0-beta.8

New:

Breaking changes:

  • @update has changed to @input to also work with v-model
  • :selected has changed to :value for the same reason

If your @update handler was only assigning the new value to the model, like for example:

onChange (newVal) {
  this.selected = newVal
}

you can safely change it to just v-model="selected".

Please let me know if everything works as it supposed to!

EDIT: Sorry for the jumps in the beta release versions. npm publish --tag next was throwing errors at me. 😞

@shentao Thank you so much for the great v-model feature, now I can't wait to refactor my code :)


Update:

Sadly found that v2.0.0-beta.8 is not compatible with Vue 1.0?

@JeOam It is dedicated for Vue 2.0. As far as I know, v-model doesn’t work with custom components in Vue 1.0.

Switched to Gulp Webpack-Stream (instead of Gulp Browserify), now it works :)

@shentao The props of hideSelected can't work ? If I use @input or v-model, the prop can't work ~ How can I deal this problem?

@jcc Weird. Please provide some more context. Code would be best.
Will try to investigate it later today.

<template>
    <div>
        <multiselect
            :value="multiValue"
            :options="source"
            :multiple="true"
            :searchable="true"
            :hide-selected="true"
            :close-on-select="false"
            :clear-on-select="false"
            :limit="5"
            placeholder="Pick some"
            label="name"
            key="name">
        </multiselect>
    </div>
</template>

<script>
    import Multiselect from 'vue-multiselect/lib/Multiselect.vue';

    export default {
        components: { Multiselect },
        data() {
            return {
                multiValue: null,
                source: [
                    {
                        "name": "Sinatra",
                        "language": "Ruby"
                    },
                    {
                        "name": "Rails",
                        "language": "Ruby"
                    },
                    {
                        "name": "Vue.js",
                        "language": "JavaScript"
                    },
                    {
                        "name": "Laravel",
                        "language": "PHP"
                    },
                    {
                        "name": "Phoenix",
                        "language": "Elixir"
                    }
                ]
            }
        }
    }
</script>

This is my code. But the props of hideSelected can't work.

In 2.0-beta version you have to use track-by="name" instead of key="name". This is due to API changes in Vue 2.0. This should solve the problem.

@shentao Thank you very much! It work now!

@shentao So for me right now everything works, except that on searchable single selects the selected option doesn't get displayed. The options show up just fine in the list, but once selected it just keeps showing the placeholder. With non-searchable single-selects or multi-selects there's no issue.
Here's an example code:

<template>
    <div class="row">
        <div class="col-xs-12 col-sm-6">
            <label>Contest</label>
            <multiselect 
                :value="selected" 
                :options="contestList" 
                :searchable="true"
                :custom-label="nameWithYear"
                @input="updateSelected"
                :close-on-select="true" 
                :clear-on-select="false" 
                placeholder="Select one" 
                label="name" 
                track-by="name">
            </multiselect>
        </div>
        <div v-if="selected" class="col-xs-12 col-sm-6">
            <label for="award">Award / Placement</label>
            <input id="award" v-model="selected.award" 
                placeholder="Contest Award or Placement" type="text">
        </div>
    </div>
</template>

<script>
    import Multiselect from 'vue-multiselect/lib/Multiselect.vue';

    export default {
        data () {
            return {
                selected: null,
                contestList : [
                    {
                        name: "Contest 1",
                        year: 2016
                    },
                    {
                        name: "Contest 2",
                        year: 2015
                    },
                    {
                        name: "Contest 3",
                        year: 2016
                    }
                ]
            }
        },

        components: {
            Multiselect
        },

        methods: {
            updateSelected (value) {
                this.selected = value;
            },
            nameWithYear ({ name, year }) {
                return `${name} ${year}`
            }
        }
    }
</script>

Internally everything works as intended. The v-if div shows up once an option has been selected. There's just no visual feedback as to what option was selected. Any idea why?

@D2Allaire I would try removing the clear-on-select prop. This is not necessary for single-selects and be the cause of the problem. :)

Thanks, works now. Should probably be removed from the Readme example then, it's used for single select there.

Aghr, sorry! Removed the misleading line from readme Thanks for catching this. :)

@shentao Thanks for this awesome component! I'm trying to get it to work on vue2, but I am encountering an issue with vueify and browserify.

Just adding the import line (no other code), I get a vueify error:

/home/xxx/yyy/source/node_modules/vueify/index.js:11
    sourceMap: options._flags.debug
                             ^

TypeError: Cannot read property 'debug' of undefined

Removing the import line, everything compiles just fine (lots of other vue2.0 code).
I have to use @mstralka's work around, so my import line is this:

import Multiselect from 'vue-multiselect/lib/Multiselect.vue';

Is there any known workaround for the following error?

build.js:500 Uncaught TypeError: this.$options.filters.filterBy is not a function

This is the HTML markup:

<multi-select
  :selected="selected"
  :options="options"
  @update="updateSelected"
></multi-select>

Changing :selected to :value doesn't work.

There are also warnings for omitting the non-required properties label and key:

Invalid prop: type check failed for prop "label". Expected String, got Boolean.

You are using Vue2.0 so filters doen't work anymore, you should use

npm install vue-multiselect@nex

@fvanwijk Just like @san4io said. You don’t have build in filters in Vue 2.0, thus you have to install the beta version.

@ryanrca Hey! Currently this seems to be the only solution. I’m working on removing the explicit browserify configuration that is present in the beta version, so this might also solve this problem.

@shentao Thanks, as you see in #140 I got it to work ;)

I should point out that my previous workaround turned out to cause a cryptic error with uglify when running gulp --production, which I raised here and figured out here

Hey guys,
First of all: THANK YOU for this AWESOME work!!! I really love what you created. <3

Just one sidenote:
Is it possible to create something like an "V2 Documentation/Hints Section"?

For example I was wondering why "@update" doesn't work. After some time I found a post in this issue here, describing why :D

Breaking changes:
@update has changed to @input to also work with v-model
:selected has changed to :value for the same reason

Just my 2cents, would be much easier for many people :) (I think a lot of people are using v2 right now and your current beta runs very well!)

I’m thinking about creating a new documentation where one can choose the version.

@shentao Is the documentation available on github? So everybody can contribute to!

I think every developer knows this problem: You are focussed on developing but you have no time for the docs :D

Hi folks,

can please anyone provide working jsfiddle on vue 2?

It would help a lot.

@grafa Here it is :)
https://jsfiddle.net/mjgfywo8/
There is no CDN for beta releases so I had to inject the library inline.

The next step now that groups are here is to release the 2.0 stable version and docs.

Minor side comment for anyone that is interested: Here's the same fiddle with :multiple=true: https://jsfiddle.net/mjgfywo8/1/

Amazing. Thank you guys.

New docs are here! ⚡️
https://monterail.github.io/vue-multiselect/

Getting closer to the 2.0 stable release! :)
I would be grateful if someone could double check the docs for errors.

Thank you very much for the jsfiddle!
It finally helped me track why I just couldn't get this lib to work using Vue 2 -
I was using vue 2.1.4, and your fiddle used vue 2.1.6.
Please note the errors that are encountered using 2.1.4: (I've also replaced the vue-multiselect inline code with a cdn)
https://jsfiddle.net/mjgfywo8/3/

Hi
i am getting the following error, and going crazy since last night. what i am i doing wrong.
i've used vue webpack loader template and added vue multiselect into app.vue which comes preloaded with the template.
Uncaught TypeError: Cannot set property 'isRootInsert' of undefined
at createElm (eval at (app.js:612), :4057:24)
at createChildren (eval at (app.js:612), :4166:9)
at createElm (eval at (app.js:612), :4091:9)
at VueComponent.patch [as __patch__] (eval at (app.js:612), :4509:7)
at VueComponent.Vue._update (eval at (app.js:612), :2483:19)
at VueComponent.eval (eval at (app.js:612), :2457:10)
at Watcher.get (eval at (app.js:612), :1661:27)
at new Watcher (eval at (app.js:612), :1653:12)
at VueComponent.Vue._mount (eval at (app.js:612), :2456:19)
at VueComponent.Vue$3.$mount (eval at (app.js:612), :6080:15)

@rjcrystal i am also getting the error, and do not know the reason.

What @thrach just said. ^

So I have been trying to get tagging and multiselect to work but no matter what I do, what advice I follow on forums there is no resolution.

I am using Vue 2.0,
have "vue-multiselect": "^2.0.0-beta.13" in my package.json
let Multiselect = require('vue-multiselect');
local registration of the component components: Multiselect,
and my template has this markup
track-by="name"
label="name"
placeholder="Select one"
:options="options"
:searchable="false"
:close-on-select="false"
:clear-on-select="false"
:show-labels="false"
:allow-empty="false"
:multiple="true">

My console spits out this error
warn @ vue.common.js:521
e._render @ vue.common.js:2223
(anonymous) @ vue.common.js:2609
Watcher.get @ vue.common.js:2934
Watcher @ vue.common.js:2926
e._mount @ vue.common.js:2608
Vue$3.$mount @ vue.common.js:6178
Vue$3.$mount @ vue.common.js:8549
init @ vue.common.js:1740
i @ vue.common.js:4174
o @ vue.common.js:4117
l @ vue.common.js:4242
o @ vue.common.js:4150
(anonymous) @ vue.common.js:4605
e._update @ vue.common.js:2635
(anonymous) @ vue.common.js:2609
Watcher.get @ vue.common.js:2934
Watcher @ vue.common.js:2926
e._mount @ vue.common.js:2608
Vue$3.$mount @ vue.common.js:6178
Vue$3.$mount @ vue.common.js:8549
e._init @ vue.common.js:3381
Vue$3 @ vue.common.js:3429
(anonymous) @ insights.js:12
25.lodash-compat @ insights.js:102
s @ _prelude.js:1
(anonymous) @ _prelude.js:1
(anonymous) @ main.application.js:13
27../careers @ main.application.js:15
s @ _prelude.js:1
(anonymous) @ _prelude.js:1
31.../../../scripts/main.application.js @ main.js:2
s @ _prelude.js:1
e @ _prelude.js:1
(anonymous) @ _prelude.js:1
vue-multiselect.min.js:1 Uncaught TypeError: this.internalValue.slice is not a function
at a.visibleValue (vue-multiselect.min.js:1)
at Watcher.get (vue.common.js:2934)
at Watcher.evaluate (vue.common.js:3042)
at Proxy. (vue.common.js:3240)
at Proxy.render (vue-multiselect.min.js:1)
at a.e._render (vue.common.js:2216)
at a. (vue.common.js:2609)
at Watcher.get (vue.common.js:2934)
at new Watcher (vue.common.js:2926)
at a.e._mount (vue.common.js:2608)

Can someone please help ?

Was this page helpful?
0 / 5 - 0 ratings