初始化 vue-bootstrap b-table 行中的复选框答案

【问题标题】：Initializing checkboxes in vue-bootstrap b-table rows初始化 vue-bootstrap b-table 行中的复选框
【发布时间】：2018-12-29 03:48:17
【问题描述】：

我正在使用 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.component。

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 中，但可能有一半的复选框表单在其 checked 属性中具有选中的值。

我需要做什么才能使这些复选框组的选中属性一致地填充？

编辑：通过手动使用 v-if 切换表格（例如表格呈现后的按钮），所有复选框都将正确显示。一旦我有一种可靠的方式来自动切换表格，我就会在这里发布。

【问题讨论】：

标签： vue.js bootstrap-vue

【解决方案1】：

问题来自我如何将对象添加到 interfaceNames 数组。当您通过索引直接设置值时，Vue.js 无法检测到对数组所做的更改。要使数组具有反应性，请使用 Vue.set(this.arrayName, indexValue, new value) （见此处https://vuejs.org/v2/guide/list.html#Caveats）

对于上面的这个特定示例，Vue.set(that.interfaceNames, i, {key: value, key: value, ...}) 有效。由于它是在循环中针对数组的所有值完成的，因此整个数组都是反应式的。

【讨论】：