Vue.js中BootstrapVue复选框渲染无限循环问题求助

你遇到的无限更新循环问题，根源在于你用了一个全局的checked变量来绑定所有行的复选框状态，并且在渲染循环里修改这个变量。每次修改this.checked都会触发Vue的响应式更新，导致表格重新渲染；而渲染时又会再次调用checkForCol方法修改this.checked，如此往复就形成了无限循环。

下面给你两种针对性的解决方案，根据你的需求选择即可：

方案一：仅展示状态（复选框禁用） #

因为你的复选框是disabled状态，只是用来展示statusInfo的状态，完全不需要用全局变量来存储。直接在模板中根据当前行的statusInfo值判断复选框状态即可：

修改后的模板 #

<tr v-for="(item, rowIndex) in data" :key="rowIndex">
  <slot :row="item">
    <!-- 注意把循环里的index改成colIndex，避免和外层行的index冲突 -->
    <td v-for="(column, colIndex) in Object.keys(item)" :key="colIndex" v-if="checkForCol(column)">
      <!-- 直接通过表达式绑定checked状态，无需全局变量 -->
      <b-form-checkbox 
        :checked="item[column] === 'ONLINE'" 
        name="check-button" 
        disabled 
        switch
      ></b-form-checkbox>
    </td>
    <td :key="colIndex" v-else>
      <span v-if="hasValue(item, column)"> {{ itemValue(item, column) }} </span>
    </td>
  </slot>
</tr>

修改后的脚本 #

data() { 
  return { 
    // 移除全局的checked变量
  } 
},
methods: {
  hasValue(item, column) { 
    // 原代码判断的是字符串"undefined"，改成判断类型更准确
    return typeof item[column] !== 'undefined' 
  },
  checkForCol(column) {
    // 只需要判断列名，无需修改全局变量
    return column === "statusInfo"
  },
  itemValue(item, column) { 
    return item[column] 
  }
}

这个方案的核心是：不再修改响应式变量，而是直接通过表达式计算复选框状态，渲染过程不会触发数据更新，自然避免了无限循环。

方案二：可交互的复选框（后续需求扩展） #

如果之后需要让复选框可编辑，那就要给每一行的item分配独立的选中状态，不要共用全局变量：

步骤1：初始化每行的选中状态 #

在获取数据后（比如created钩子或接口请求成功后），给每个item添加独立的checked属性：

created() {
  // 假设this.data是从接口或本地获取的数组
  this.data.forEach(item => {
    item.checked = item.statusInfo === 'ONLINE'
  })
}

步骤2：修改模板绑定 #

<b-form-checkbox 
  v-model="item.checked" 
  name="check-button" 
  switch
></b-form-checkbox>

这样每一行的复选框状态都是独立的，修改时只会更新当前item的属性，不会触发全局的无限循环。

额外小优化 #

原代码中hasValue方法的判断逻辑有问题：item[column] !== "undefined"是判断值是否等于字符串"undefined"，但我们应该判断的是值的类型是否为undefined，所以改成typeof item[column] !== 'undefined'更准确。

内容的提问来源于stack exchange，提问作者Koushik Reddy U