如何动态加载数据到 VueJs 中的多选选项

Question

我需要使用 VueJs 将数据动态加载到多个 select 选项。我尝试了很多方法，但对我没有任何帮助。这是我的代码

<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 函数

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}`
},

在上面的函数中，BrandId 是这样的 TCUK,WAFR,TOUR,MABU, 只有用逗号分隔的代码我想做成下面的样子

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

如果像上面那样手动分配值，它工作正常。我必须动态地做我怎样才能做到这一点？

Answer 1

假设您有 2 个数组，一个用于名称，一个用于顺序正确的代码。您可以像这样创建一个对象数组

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

Answer 2

我将此发布给未来的观众..

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

    },

});

并且在更新 upallwebbrand 从数据库中获取代码并执行 for 循环以将数据推送到数组 upallwebbrand 时，如下所示

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


    });
}

如何动态加载数据到 VueJs 中的多选选项

How to Load data dynamically to multiselect Option in VueJs

vue.js

vue-multiselect