axios GET 中的 vue.js 多选更改选项

Posted 2023-02-23

【中文标题】axios GET 中的 vue.js 多选更改选项

【英文标题】：vue.js multi select change options inside axios GET

【发布时间】：2019-07-05 20:37:34

【问题描述】：

您好，我正在使用 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 fiddle，

【问题讨论】：

这个问题之前回答过，check it out

对不起兄弟默认值不适用于组件。还是谢谢

【参考方案1】：

我终于找到了答案。我们需要交换组件watch的options和value的位置。

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