如何使用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 > 

參考鏈接 ：