using vue.js with select2

[ghost]

I am trying to use select2 plugin in vue.js using custom-directive approach.

I am facing the issue of infinite looping. How do I fix this?

https://jsfiddle.net/9Lwo9r8y/

[Vue warn]: You may have an infinite update loop for the watcher with expression: "selected_college_class_id"

[jakeryansmith]

It looks like the update watcher triggers the change event which would in turn trigger the update watcher? So this would go on forever.

[ghost]

Yeah, any idea how to fix this?

Or is there any better searchable select plugin to use with vue.js?

[ghost]

@yyx990803 ? Please help!

[jakeryansmith]

I've been messing with this for the last few min, this is what I have so far: https://jsfiddle.net/9Lwo9r8y/

[ghost]

@jakeryansmith I think you pasted the same fiddle. Please update.

[jakeryansmith]

Oh sorry. What I had wasn't working that great anyway. Does this have to be a directive? I think the problem is that you set up an onChange listener on the select menu, but also have an updated listener with the directive. I'm not sure both are needed. You might try writing it in a way that you don't use both, idk just an idea. Or maybe don't even use a directive and just fill the select menu using <select option="college_classes" v-model="selected_college_class_id"> Then change the value of selected_college_class_id when the select value changes.

[jakeryansmith]

This seems to work:

Vue.directive('select2', {
    bind: function () {
        var vm = this.vm;
        var key = this.expression;

        var select = $(this.el);

        select.select2();
        select.on('change', function () {
            vm.$set(key, select.val());
        });
    }
});

new Vue({
    el: '#main',
    data: {
        selected_college_class_id: '',
        college_classes: [{
            id: 1,
            name: 'FE'
        }, {
            id: 2,
            name: 'SE'
        }]
    }
});

I just removed the update listener.

[ghost]

Nope. If you remove update listener, select 2 will not select the appropriate option if the value of model changes. Try selecting the second option and click the 'set class_id as 1' button. It will change the model value but won't update the option.

[ghost]

I did this. It works but it is lot of code and not that clean way of doing it.

https://jsfiddle.net/9Lwo9r8y/3/

I hope @yyx990803 suggests the correct way to achieve this!

[jakeryansmith]

I don't see anything wrong with the changes you made. It actually looks a lot cleaner to me. Using the 'options' directive is the recommended way of filling a select menu. What exactly don't you like about it?

[ghost]

The fact that I have to manage 2 way data binding for select2 myself. Imagine for a big app, I will need to register so many watchers and so many change event listeners.

[jakeryansmith]

Gotcha

[kaorun343]

Hello.

I checked the first code, and I found that newVal and oldVal were in reverse order.

[MacArthurJustin]

I know this is a bit old but I recently had to do this and found a bit easier way of connecting everything. https://jsfiddle.net/reyekdnj/

[desprit]

@MacArthurJustin Your fiddle seems to be broken.

[MacArthurJustin]

@desprit Thanks I don't knwo why the ready option is there I must have not noticed when I saved it. try this one https://jsfiddle.net/reyekdnj/2/

[desprit]

@MacArthurJustin Thank you!

[ilgala]

I've created a little fiddle for Vuejs 2, Any ideas why the button isn't working? https://jsfiddle.net/ilgala/82ztLqvL/