Vue-select: Vue 2.0 compatibility

[san4io]

Hey,

Tried this plugin in vue 2.0 rc4, and it fails, when do you plan to release select for 2.0, only then 2.0 goes stable?

As you can guess, it fails on filters.

I tooked a look at your component and I think that for proper work we only have to change

let options = this.$options.filters.filterBy(this.options, this.search)

[sagalbot]

Hi @san4io,

It's definitely on the roadmap. My original plan was to update when 2.0 was released stable, but I've had a few requests now for 2.0 compatibility, so I will probably move ahead sooner than later.

I've done the same assessment and think you're probably right. I would also like to move to an event based system rather than function callbacks.

[toabi]

Now that vue2 is out, what's the estimate for a 2.0-compatible release?

[gomako]

Can this be created as a pull request? Would love to use this in a project.

[tylerwiegand]

Stable 2.0 is out, +1 on compatibility <3

[sagalbot]

Well, here's the initial list of to-dos for 2.0 compatibility - looks like a pretty low level of complexity. I finally have a bit of time spared up to get to work on this. @gomako, yes would happily accept PRs.

[amitavroy]

Can't wait to use this in a Vue 2.0 app. When is this coming??? @sagalbot

[ChadTaljaardt]

Just found this package, really want to use it in vue2

👍

[gomako]

@sagalbot Hi, I would like to help out. I haven't really ever contributed to anything on here before. I have forked the repo and just gone through and got rid of 30ish of the vue-migration-helper warnings so far, is that going to be helpful at this point?

[sagalbot]

@gomako, appreciate the enthusiasm! Have a look at the vue2 branch. Looks like we're pretty much through the vue-migration-helper checklist now.

@amitavroy - getting close now.

[clorichel]

This component looked so insanely awesome 😍 I could not even admit it is not working on Vue.js 2.0 !! lol

I hope you get to something soon so I'll use it for GanttLab to replace each select it uses.

Let me know if you need any help 👍

_Edit: updated links, project has been renamed..._

[seuaCoder]

Can't wait for that too :)

[bopjesvla]

Looking at the updated tests in the vue2 branch, I'm surprised to see that you didn't change the syntax to <v-select v-model="value"></v-select>. I'm probably missing something here, but in case you're not aware of this feature:

To update one of my input components to 2.0, I just had to move value from props to data, emit an input event whenever the value changed, and replace value.sync with v-model.

[sagalbot]

@bopjesvla that's hugely beneficial, thanks for noting that. So far the vue2 branch is completely written by outside contributors - I've been super busy and haven't had a chance to write some code myself, but this will definitely be the implementation.

[erwinssaget]

Any timeline on when this will be complete?

Also, do you need any help with this?

[xereda]

Hello Friend,
First, congratulations on the beautiful component. Excellent his initiative.
We have any plans to support version 2.0 of VueJS !?
I appreciate the feedback.

[renedekat]

@bopjesvla You got it working with Vue2? Could you help me out with this http://jsbin.com/sixujusaha/edit?html,js,output ?

It won't select any options.

[bopjesvla]

Nope, I just explained how I migrated another component to Vue 2.

[bopjesvla]

@bopjesvla that's hugely beneficial, thanks for noting that. So far the vue2 branch is completely written by outside contributors - I've been super busy and haven't had a chance to write some code myself, but this will definitely be the implementation.

Nice! I actually misremembered something: value shouldn't be moved from props to data.

[amitavroy]

Hmm... still not ported :(

[solidevolution]

Is this project dead? Please inform globally and don't waste others time. Thx!

[jasrys]

For those who can't wait for 2.* compatibility, have a look at the select component in Element-UI - supports 2.* and remote ajax option loading. Works well for me.

[sagalbot]

@solidevolution it's not dead. Higher demand doesn't mean I have the time to work on it, although I wish that was the case. I put in a few solid hours on Sunday and any free dev time I have is going to go to this getting bumped up to 2.0. Of course my intention was not to waste your time. There are nicer ways to ask if things are being worked on.

[sagalbot]

All tests are now passing in the vue2 branch with the exception of one that uses inject-loader to mock the pointerScroll mixin:

1) should scroll down if the pointer is below the current viewport bounds
     Select.vue Moving the Typeahead Pointer Automatic Scrolling
     TypeError: Object is not a constructor (evaluating '__vue_exports__(injections)') in index.js (line 11431)
exports@webpack:///src/components/Select.vue?45f0:15:0 <- index.js:11431:37
webpack:///test/unit/specs/Select.spec.js:497:23 <- index.js:648:24
webpack:///test/unit/specs/Select.spec.js:454:5 <- index.js:607:11
webpack:///~/vue/dist/vue.common.js:471:15 <- index.js:2039:25
nextTickHandler@webpack:///~/vue/dist/vue.common.js:420:0 <- index.js:1988:17

That said everything else is working and I'm going to tag it as 2.0.0-alpha. Things to note:

• You can now use the v-model directive on the component, instead of value.sync:
  html <v-select v-model="foo">

• The value, options and loading props are used internally only in the created hook, where they are then mapped to mutableValue,mutableOptions, and mutableLoading. In Vue2, props should be considered immutable, so this aligns with that pattern.

• The onChange callback now has a default value:

  default: function(val) {
    this.$emit('input', val)
  }
  

  This is what allows the component to be used with v-model, so if you're going to add your own callback, be aware of that.

Once the issue mock issue is solved, I will tag a stable 2.0.0 release.

[ethanclevenger91]

@sagalbot is that to say that this should currently work with the exception of that feature?

[sagalbot]

@ethanclevenger91 mostly, yes. Just noticed that the search is currently case-sensitive, will need to fix that.

I'm writing some more tests tonight and overhauling the docs, hoping to be ready to release by tomorrow.

[bartvosman]

Hi @sagalbot,

First off all, great to see all the work you put in.
I was wondering what the status is off the new version.

[sagalbot]

@bartvosman very close now. Lost a bit of momentum over the holidays but I'm back at the keyboard now. Most of the work left is related to overhauling the docs, but I'll put the release out before that's finished so people can start using it.

[xKairu]

Any update on this? I'm also getting #111 on 2.0.8 along with Uncaught TypeError: Cannot read property 'dropdownMenu' of undefined, not sure if it's been reported yet.

[dushaun]

@xKairu I was looking at this yesterday as well, it seems to be the only thing that fails its test on vue-select's travis ci. Hopefully one of us can find the solution.

[adampatarino]

@sagalbot bump. Any update on merging in the vue2 branch?

[bornaeon]

Thanks for the great work, @sagalbot!
As others, I've been also waiting for the release with Vue2.0 support for more than a month... Do you perhaps have any idea when it'll be ready or can anyone be a bit of help? :)

[sagalbot]

@bornaeon @adampatarino @xKairu @dushaunac thanks for your patience! I've just completed what I expect to be the last one or two commits. All the tests are passing, and it's probably ready to be published as the new release on npm. I will take another look in the morning with fresh eyes. Feel free to checkout the latest on the vue2 branch and let me know if there's anything I've missed.

[ChiChou]

@sagalbot Thanks for the work!

[xereda]

So is it working with version 2.0?

[sagalbot]

@xereda yes. I'm hoping to publish v2 to npm tomorrow.

[SlyNet]

Is it a different package? Or vue-select is compatible now?

[matiastucci]

is in npm yet? I still can't find it. Thanks!

[ethanclevenger91]

Rather than ask about the status, use a reaction so everyone in the issue isn't notified, and if you want to be super helpful and use the Vue2 branch as it stands, add this to your package.json:

 "vue-select": "sagalbot/vue-select#vue2",

You may find there are still bugs (remember what I said about being super helpful!? 😀 ), you can then find an already existing issue for that bug or open a new one. @sagalbot if I were you, I'd close the other issue in the meantime as a dupe.

[sagalbot]

Thanks @ethanclevenger91, you're right on the money. I know there's a lot of demand I really wish I had more time to dedicate to it - it definitely bugs me that I've fallen behind on it.

That said, all the tests are passing and it works very nicely with Vue 2.1.*. The new v-model syntax is awesome.

If you want to use it now, @ethanclevenger91's install method is the way to go.

Todos:

• [x] Update the docs to match the new API
• [x] Tag a release here
• [x] Bump package.json version and publish to npm

[sagalbot]

Party time, vue-select is finally compatible with Vue 2.0!

npm install vue-select will now install v2.0.0.