Vue.js Bootstrap表格：父子组件传值及v-if失效问题

控制台打印显示state已正确赋值，但DOM中显示undefined，核心原因是Vue2的响应式机制限制：直接给已存在的对象新增属性时，Vue无法自动监听该属性的变化，导致数据更新后视图未同步。

1. 提前初始化state属性（推荐） #

在获取API数据后，给customItems的每一项预先添加state属性，确保后续修改能触发响应式更新：

// 示例：在获取API数据的方法中处理
fetchApiData().then(res => {
  this.customItems = res.data.map(item => ({
    ...item,
    state: false // 初始化默认值
  }))
})

2. 使用this.$set确保响应式更新 #

如果无法提前初始化属性，修改isSingleRow方法时用this.$set给对象添加/更新属性，强制Vue监听该属性：

methods: {
  isSingleRow(event, rowIndex) {
    // 通过行索引精准定位当前行，避免批量赋值覆盖
    this.$set(this.customItems[rowIndex], 'state', event)
    console.log('EHO ', rowIndex, ' ', this.customItems[rowIndex]);
  }
}

同时父组件需给子组件传递当前行的索引：

<template v-slot:cell(config)="row">
  <child-component
    @onitembind="(val) => isSingleRow(val, row.index)">
  </child-component>
</template>

3. 修正子组件的触发时机（可选） #

如果innerTableItems是异步获取的数据，created钩子可能还未拿到数据，导致判断不准确，建议通过监听数据变化触发：

// Child组件
watch: {
  innerTableItems: {
    immediate: true,
    handler() {
      this.tableRowsLength()
    }
  }
},
methods: {
  tableRowsLength () {
    this.$emit('onitembind', this.innerTableItems.length !== 1)
  }
}

• 避免循环遍历customItems批量赋值：每个子组件触发onitembind时都会执行循环，会导致之前的行被重复覆盖，必须通过行索引精准定位当前行。
• Vue2仅对初始化时存在的属性做响应式监听，新增属性必须用Vue.set/this.$set，或提前初始化属性。

内容的提问来源于stack exchange，提问作者monny