如何使用 select2 加载对象数据数组

Question

我的问题：

我已经创建了我的问题的完整场景。

我的 HTML：

<select data-placeholder = "Sending" id = "sender" data-allow-clear = true >
   <option ></option >
</select >    

<select data-placeholder = "Receiving" id = "receiving" data-allow-clear = true >
  <option ></option >
</select >

Corridor url 返回以下集合（我使用 laravel 作为后端）：

[ {
    "id"                 : 1, "source_country_id": 1, "destination_country_id": 2,
    "source_country"     : { "id": 1, "name": "United Kingdom", "flag_icon": "flag-icon-gb" },
    "destination_country": { "id": 2, "name": "Pakistan", "flag_icon": "flag-icon-pk" }
}, {
    "id"                 : 2, "source_country_id": 1, "destination_country_id": 3,
    "source_country"     : { "id": 1, "name": "United Kingdom", "flag_icon": "flag-icon-gb" },
    "destination_country": { "id": 3, "name": "India", "flag_icon": "flag-icon-in" }
}, {
    "id"                 : 7, "source_country_id": 1, "destination_country_id": 4,
    "source_country"     : { "id": 1, "name": "United Kingdom", "flag_icon": "flag-icon-gb" },
    "destination_country": { "id": 4, "name": "Bangladesh", "flag_icon": "flag-icon-bd" }
} ]

我的 Vue 代码：在使用 axios 的 corridors 方法中，我正在检索数据（如上所示），之后我为 sendigCountries 和 recevingCountries 创建了两个数组。两个数组都成功填充了它的数据（sendingCountries 使用重复数据创建），之后我想将该数据传递给 select2 但 select2 没有填充该数组。请帮我找出我犯错的地方。

  var app = new Vue({
    methods: {
         corridors : function () {
                   axios.post ( '/corridors' )
                   .then ( response => {
                         let sendingCountries   = [];
                         let receivingCountries = [];
                         _.forEach ( response.data, function (value, key) {
                                 sendingCountries.push ( {
                                   id: value.source_country.id,
                                   text: value.source_country.name,
                                   flag: value.source_country.flag_icon
                                 });

                                 receivingCountries.push ( {
                                   id  : value.destination_country.id,
                                   text: value.destination_country.name,
                                   flag: value.destination_country.flag_icon
                                 });
                    } );
                   $ ( "#sender" ).select2 ( {
                                      width: '100%',
                                      data : sendingCountries,
                                  } );
                    $ ( "#receiver" ).select2 ( {
                                      width: '100%',
                                      data : receivingCountries,
                                  } );
                   } )
                   .catch ( error => { } )
            }
     }
})

Answer 1

数组格式不正确：

var data = [{ id: 0, text: 'enhancement' }, { id: 1, text: 'bug' }, { id: 2, text: 'duplicate' }, { id: 3, text: 'invalid' }, { id: 4, text: 'wontfix' }];

数组必须包含 id 和 text 键。

更新：

HTML：

var sender=$ ("#sender").select2 ({
     width: '100%'
	});
	
 var receiver= $ ("#receiver").select2 ({
     width: '100%'
  });
 

 var app = new Vue({
    methods: {
         corridors : function () {
                   axios.post ( '/corridors' )
                   .then ( response => {
                         let sendingCountries   = [];
                         let receivingCountries = [];
                         _.forEach ( response.data, function (value, key) {
                                 sendingCountries.push ( {
                                   id: value.source_country.id,
                                   text: value.source_country.name,
                                   flag: value.source_country.flag_icon
                                 });

                                 receivingCountries.push ( {
                                   id  : value.destination_country.id,
                                   text: value.destination_country.name,
                                   flag: value.destination_country.flag_icon
                                 });
                    } );

             //Assume this array coming from ajax
             var sourceCountry = [{ id: "US", text: 'America' }, { id: "AF", text: 'Africa' }, { id: "Ind", text: 'India' }, { id: "UK", text: 'England' }, { id: "ITL", text: 'Itally' }];

             var receivingCountries = [{ id: "US", text: 'America' }, { id: "AF", text: 'Africa' }, { id: "Ind", text: 'India' }, { id: "UK", text: 'England' }, { id: "ITL", text: 'Itally' }];
                  sender.select2({data:sourceCountry});
                  receiver.select2({data:receivingCountries});
                   } )
                   .catch ( error => { } )
            }
     }
})

<select class="select2" data-placeholder = "Sending" id = "sender" data-allow-clear = true >
   <option value="">Please Select</option >
</select >    

<select class="select2"  data-placeholder = "Receiving" id = "receiver" data-allow-clear = true >
  <option value="">Please Select</option >
</select >

参考Link：