Question

我正在使用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代码，其中包含ine方法的示例，这些方法被调用来获取所检查道具的数据。

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手动切换表格（表格渲染后，按一个按钮），所有复选框将正确显示。一旦有了可靠的方式来自动切换表格，我将在此处发布该表格。

Answer 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，...}）起作用了。由于它是针对数组的所有值循环执行的，因此整个数组都变得具有反应性。

初始化vue-bootstrap b表行中的复选框

1 个答案: