Bootstrap-Vue表格变量作为复选框v-model绑定失效问题求助

这是个很典型的Vue响应式绑定坑，我来帮你拆解原因和可行的解决方案～

原方案失效的核心原因 #

你最初的写法里，integrationsTableItems()返回的{ model: this.variable }其实是把this.variable的当前值（false）赋值给了item的model属性。因为JavaScript的基本类型（boolean、string、number）是值传递，不是引用传递，所以之后复选框修改的只是item里的model副本，完全没关联到data里的variable变量，自然同步不了状态。

可行的解决方案 #

根据你的使用场景，有几种更优雅的方式实现双向绑定：

场景1：表格仅对应单个变量（如示例中只有一行） #

直接跳过items的中转，在插槽里直接绑定data中的变量即可：

<b-table class="settings-integrationsTable" outlined :items="integrationsTableItems()" :fields="print_integrations_fields">
  <template v-slot:cell(switch)="data">
    <b-form-checkbox type="checkbox" v-model="variable"></b-form-checkbox>
  </template>
</b-table>

<script>
export default {
  data () {
    return { variable: false }
  },
  methods: {
    integrationsTableItems () {
      return [{}] // 只需要保证表格有一行数据即可
    }
  }
}
</script>

场景2：表格有多行，每行对应data中的不同变量 #

把基本类型变量包装成对象（对象是引用传递），这样修改对象内的属性就能同步到data中的变量：

<b-table class="settings-integrationsTable" outlined :items="integrationsTableItems()" :fields="print_integrations_fields">
  <template v-slot:cell(switch)="data">
    <b-form-checkbox type="checkbox" v-model="data.item.model.value"></b-form-checkbox>
  </template>
</b-table>

<script>
export default {
  data () {
    return {
      // 把基本类型包装成对象，保留引用关系
      variable: { value: false },
      anotherVariable: { value: true }
    }
  },
  methods: {
    integrationsTableItems () {
      return [
        { model: this.variable },
        { model: this.anotherVariable }
      ]
    }
  }
}
</script>

场景3：用统一状态对象管理多个开关 #

这种方式和你的临时方案思路类似，但不需要自定义get/change方法，直接用v-model就能搞定：

<b-table class="settings-integrationsTable" outlined :items="integrationsTableItems()" :fields="print_integrations_fields">
  <template v-slot:cell(switch)="data">
    <b-form-checkbox type="checkbox" v-model="switchStates[data.item.modelKey]"></b-form-checkbox>
  </template>
</b-table>

<script>
export default {
  data () {
    return {
      // 用一个对象统一管理所有开关状态
      switchStates: {
        variable: false,
        thirdVariable: true
      }
    }
  },
  methods: {
    integrationsTableItems () {
      return [
        { modelKey: 'variable' },
        { modelKey: 'thirdVariable' }
      ]
    }
  }
}
</script>

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