Question

嗨，我正在使用this修改后的包装器来处理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组件。

Here是我的示例中的js小提琴，

Answer 1

最后我找到了答案。我们需要交换选项的位置和组件监视的值。

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

vue.js在axios GET

1 个答案: