Как загружать данные динамически для выбора нескольких вариантов в VueJs - PullRequest
Новая
       33

Как загружать данные динамически для выбора нескольких вариантов в VueJs

0 голосов
/ 02 октября 2019

Мне нужно загружать данные динамически в опцию множественного выбора, используя 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' }
]

Если назначить значения вручную, как указано выше, все работает нормально. Я должен сделать это динамически. Как я могу добиться этого ??

Ответы [ 2 ]

1 голос
/ 09 октября 2019

Предположим, у вас есть 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]
    });
}
0 голосов
/ 11 октября 2019

Я отправляю это для будущих зрителей .. 

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


    });
}
...