[Vuejs]-How to Load data dynamically to multiselect Option in VueJs

by

0👍

✅

I’m Posting this for future viewers..

var hrform = new Vue({
    el: '#hrform',
    data: {
        upselectdesignation:'',
        upallwebbrand : []   //I defined the array like this

    },

});

And while updating the upallwebbrand getting the codes from database and did the for loop to push the data to array upallwebbrand like below

showdata: function (staffid) {
    axios.post("/HR/Showdata/", null, { params: { staffid } }).then(function (response) {

        hrform.oripassword = response.data.password;
        hrform.upusername = response.data.userdata.UserName;
        hrform.staffid = response.data.userdata.EmployeeId;
        hrform.upselectedteam = response.data.userdata.TeamId;
        hrform.upaccesslevel = response.data.userdata.AccessLevel;
        hrform.upselectedstatus = response.data.userdata.Status;
        hrform.upemail = response.data.userdata.Email;            
        hrform.upselectdesignation = response.data.userdata.Designation;
        //hrform.branss = response.data.userdata.BrandId;

        var codes = response.data.userdata.BrandId.split(",");  // Spliting the brand Id
        var obj = { 'TCUK': 'Travel Center', 'MABU': 'Mabuhai', 'WAFR': 'World AirFares', 'TOUR': 'Tour Center' }
        hrform.upallwebbrand = [];
        for (var i = 0; i < codes.length; i++) 
        {
            if (codes[i] in obj) {
               hrform.upallwebbrand.push({ code: codes[i], name: obj[codes[i]] })
            }
        }


    });
}
👤Shakir Ahamed

1👍

Lets assume you have 2 arrays, one for name and one for code which is in the right order. You can create an array of objects like this

var name_arr = ['name1', 'name2', 'name3']
var code_arr = ['code1', 'code2', 'code3']
var upallwebbrand = []
for(var i=0; i<name_arr.length; i++){
  upallwebbrand.push({
       name: name_arr[i],
       code: code_arr[i]
    });
}
👤Gowthaman

Leave a comment