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