Я работаю над страницей, используя vue-bootstrap, в каждую строку которой встроена группа b-form-checkbox-group. Кажется, все в порядке. Проблема возникает, когда я пытаюсь присвоить значения проверенной опоре. Когда я назначаю статический номер, поля будут отмечены, как и должны быть при загрузке страницы, но когда я пытаюсь настроить его для получения ответов от вызовов jquery get, поля только иногда заполняются без шаблона, насколько я могу видеть.
<nit-card :title="host">
<b-table
:items="interfaceNames"
:fields="switch_interface_config_col_names">
<template slot="tagged" slot-scope="row">
<b-form-checkbox-group :options="vlans"
:checked="interfaceNames[row.index].taggedVlans"
stacked>
</b-form-checkbox-group>
</template>
<template slot="untagged" slot-scope="row">
<b-form-radio-group :options="vlans"
:checked="interfaceNames[row.index].untaggedVlans"
stacked>
</b-form-radio-group>
</template>
</b-table>
</nit-card>
Выше приведен HTML-код таблицы. nit-card - это компонент vue.com, который выглядит следующим образом.
Vue.component('nit-card', {
props: ['title'],
template: `
<div class="card">
<div class="card-header">
<h2 class="card-title">{{ title }}</h2>
</div>
<div class="card-body">
<slot></slot>
</div>
</div>
`
})
И немного кода js с примерами методов, которые вызываются для получения данных для проверенной опоры.
let generic_name = new Vue({
el: '#generic_name',
data: function(){
return{
interfaceNames: [],
vlans: [],
switch_interface_config_col_names: [
{key: "interfaceName", sortable: true},
{key: "description", sortable: false},
{key: "tagged", sortable: false},
{key: "untagged", sortable: false},
],
submit_params: [
["Switch", "text", "Hostname or IP", true],
["Interface", "text", "Interface Name", true],
],
host: "",
}
},
methods: {
getTagged: function(){
let that = this
for(let i = 0; i < that.interfaceNames.length; i++){
let url_encoding_re = /\//g;
let interfaceName = that.interfaceNames[i].interfaceName.replace(url_encoding_re, '%5c')
$.get(api_url + "/switches/" + that.host + "/interfaces/" + interfaceName + "/vlans/tagged", function(response) {
console.log(response)
that.interfaceNames[i].taggedVlans = response.vlans
})
}
},
}
Как я представляю, это происходит так: массив interfaceNames хранит данные, а затем к ним обращается html с помощью значения row.index. На самом деле происходит то, что, возможно, половина форм флажков имеет отмеченные значения в их проверенных свойствах, хотя, когда я смотрю на корневую vue, значения присутствуют в interfaceNames [x] .taggedVlans.
Что мне нужно сделать, чтобы отмеченное свойство постоянно заполнялось для этих групп флажков?
РЕДАКТИРОВАТЬ: путем переключения таблицы с помощью v-if вручную (например, кнопка после отображения таблицы) все флажки будут отображаться правильно. Как только у меня появится надежный способ автоматического переключения таблицы, я опубликую его здесь.
