1

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

我需要做什么才能为这些复选框组一致地填充选中的道具？

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

4

1 回答 1

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, ...}) 有效。由于它是在循环中针对数组的所有值完成的，因此整个数组都是反应式的。

于 2018-07-30T17:34:16.580 回答