vue.js multi select изменить параметры в axios GET - PullRequest
Новая
       28

vue.js multi select изменить параметры в axios GET

0 голосов
/ 12 февраля 2019

Привет, я использую эту модифицированную оболочку для обработки множественного выбора для vue.js.Я пытаюсь изменить значение этого внутри компонента VUE.Вот мой код. 

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

А это мой скрипт, 

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);
                                    });   
    }
});

Мне нужно выбрать vm.input.classification = ["2"] по умолчанию.И это не работает, и сообщение об ошибке не отображается.Я не эксперт в компонентах vue, но чувствую, что проблема зависит от компонента vue.

Здесь - это js-скрипка для моего примера,

1 Ответ

0 голосов
/ 12 февраля 2019

Наконец я нашел ответ.Нам нужно поменять позиции опций и значение компонента 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');
    }
  },
...