Wrapper Component example didn't set corresponding item after component mounted

[arthow4n]

Current behavior

Inside the JSFiddle example of Wrapper Component mentioned in Wrapper Component — Vue.js,

If I edit the JavaScript source in line 34, changing data.selected from 0 to 2, and run again, select2 doesn't set corresponding item World to selected after component mounted.

Performing setTimeout(() => { vm.selected = 2 }, 1000); at the end of script also didn't make select2 set corresponding item to selected.

Expected behavior

Should make select2 select corresponding item after component mounted and on model selected change.

Patched demo is here: https://jsfiddle.net/fruqrvdL/456/

--- old	2017-02-13 14:52:44.697543260 +0800
+++ new	2017-02-13 14:53:03.033136517 +0800
@@ -4,9 +4,10 @@
   mounted: function () {
     var vm = this
     $(this.$el)
-      .val(this.value)
       // init select2
       .select2({ data: this.options })
+      .val(this.value)
+      .trigger('change')
       // emit event on change.
       .on('change', function () {
         vm.$emit('input', this.value)
@@ -15,7 +16,7 @@
   watch: {
     value: function (value) {
       // update value
-      $(this.$el).val(value)
+      $(this.$el).val(value).trigger('change');
     },
     options: function (options) {
       // update options

[saazrai]

Thanks. Was facing the same issue. Your patch resolves the issue.

[chrisvfritz]

@arthow4n This looks great! I'd accept a pull request if you want the credit. 🙂