0

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

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

在 bove 函数中 BrandId 就像这样TCUK,WAFR,TOUR,MABU,只有逗号分隔的代码我想让它像下面一样

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

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

4

2 回答 2

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]
    });
}
于 2019-10-09T15:41:45.277 回答
0

我为未来的观众发布这个..

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


    });
}
于 2019-10-11T12:16:35.407 回答