CODEWITHSUNDEEP
vue.jsvue-multiselect
Shakir Ahamed
Shakir Ahamed

Reputation: 1308

How to Load data dynamically to multiselect Option in VueJs

I need to load the data dynamically to multi select option using VueJs. I tried lot of ways but nothing is worked for me. this is my codes

<multiselect id="webbrand" v-model="upallwebbrand" data-validation="required" data-validate-name="WebBrand"
      :options="webbrands"
      :multiple="true"
       track-by="code"
      :custom-label="websites"
      placeholder="Please select deafult website first">
</multiselect>

Vue Function

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.upallwebbrand = response.data.userdata.BrandId**

      hrform.upallwebbrand = [{ name: 'Travelcenter', code: 'TCUK' },
                              { name: 'Tour Center', code: 'TOUR' },
                              { name: 'World Airfairs', code: 'WAFR' },
                              { name: 'Mabuhay', code: 'MABU' }];

      hrform.upselectdesignation = response.data.userdata.Designation;

      });
},

websites: function (option) {
    return `${option.name} - ${option.code}`
},

In bove function BrandId is coming like this TCUK,WAFR,TOUR,MABU, only code with comma separated I want to make it like below

[
 { name: 'Travelcenter', code: 'TCUK' },
 { name: 'Tour Center', code: 'TOUR' },
 { name: 'World Airfairs', code: 'WAFR' },
 { name: 'Mabuhay', code: 'MABU' }
]

If assigned values manually like above it's working fine. I have to do it dynamically How can I achieve this??

Upvotes: 0

Views: 1969

Answers (2)

Shakir Ahamed
Shakir Ahamed

Reputation: 1308

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]] })
            }
        }


    });
}

Upvotes: 0

Gowthaman
Gowthaman

Reputation: 1282

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]
    });
}

Upvotes: 1

Related Questions