如何使用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和文本鍵。

UPDATE：

HTML：

var sender=$ ("#sender").select2 ({ 
 
    width: '100%' 
 
\t }); 
 
\t 
 
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：