Vue.js + Bootstrap-Select：如何避免渲染循环？

Question

I'm trying to get Vue.js to play nice with Bootstrap-select , but am completely stumped on how to avoid the render loop between the value being set with .selectpicker('val') , and being constantly updated by Vue.

Example here:

https://codepen.io/schmoove/pen/EeeVab

vm.$emit('input', this.value) (line 10)

Works, but not with multiple selections. However, if you switch to:

vm.$emit('input', $(this.$el).selectpicker('val')); (replace line 10 with line 9)

It sends the script into an infinite loop.

I'm relatively new to Vue.js and just can't understand how this should work, or if Bootstrap-select is making things particularly difficult. Any help would be much appreciated!

Answer 1

Change

vm.$emit('input', this.value)

to

vm.$emit('input', vm.value)