vue.js multi select change options inside axios GET

Question

Hi I'm using this modified wrapper to handle a multiple select for vue.js. I'm trying to change value of this inside vue component. Here is my code.

<select2-multiple :options="car_options" v-model="input.classification">
       <option disabled value="0">Select one</option>
</select2-multiple>

And this is my script,

Vue.component('select2Multiple', {
  props: ['options', 'value'],
  template: '#select2-template',
  mounted: function () {
    var vm = this
    $(this.$el)
      // init select2
      .select2({ data: this.options })
      .val(this.value)
      .trigger('change')
      // emit event on change.
      .on('change', function () {
        vm.$emit('input', $(this).val())
      })
  },
  watch: {
    value: function (value) {
    alert(value);
       if ([...value].sort().join(",") !== [...$(this.$el).val()].sort().join(","))
        $(this.$el).val(value).trigger('change');
    },
    options: function (options) {
      // update options
      $(this.$el).select2({ data: options })
    }
  },
  destroyed: function () {
    $(this.$el).off().select2('destroy')
  }
});

var vm = new Vue({
    el: '#el',
    delimiters: ["[[", "]]"],
    data: {
        input: {
            classification: []
        },
    },
    created: function () {
        var vm = this;
        axios.get('http://jsonplaceholder.typicode.com/todos')
                                    .then(function (response) {
                                        $.each(response.data, function (i, item) {
                                            response.data[i].id = String(response.data[i].id);
                                            response.data[i].text = String(response.data[i].title);
                                            vm.car_options.push(response.data[i]);
                                        });
                                        vm.input.classification = ["2"];
                                    })
                                    .catch(function (error) {
                                       console.log(error);
                                    });   
    }
});

I need to get vm.input.classification = ["2"] selected by default. And it's not working and no error message displays. I'm no expert in vue components but I feel like issue relies on vue component.

Here is a js fiddle for my example,

This question was answered before, [check it out](https://stackoverflow.com/questions/41122028/set-default-value-to-option-select-menu) — Marco, Feb 12 '19 at 10:28
Sorry bro default value doesn't work on the component. Thanks anyway — vimuth, Feb 12 '19 at 10:33

vimuth · Accepted Answer · 2019-02-12T13:11:18.233

0

Finally I found the answer. We need to swapp the positions of options and value of component watch.

watch: {
    options: function (options) {
      // update options
      $(this.$el).select2({ data: options })
    },
    value: function (value) {
       if ([...value].sort().join(",") !== [...$(this.$el).val()].sort().join(","))
        $(this.$el).val(value).trigger('change');
    }
  },

edited Feb 12 '19 at 13:11

answered Feb 12 '19 at 13:03

vimuth

5,064
33
79
116

vue.js multi select change options inside axios GET

1 Answers1