如何实现Quasar框架中两组toggle按钮组的互斥选中效果

要实现同组两个q-btn-toggle互斥，只需在其中一个按钮组选中时，将同索引下另一按钮组的绑定值重置为null即可，需注意使用Vue的$set方法保证数组变更能触发响应式更新。

具体修改步骤 #

• 第一步：修改模板中q-btn-toggle的事件绑定，传入当前循环索引

<q-card-section>
  <q-btn-toggle
    v-model="togglePercentPayments[index]"
    toggle-color="primary"
    :options="percentPayments"
    spread
    @input="onPercentChange(index)"
  />
</q-card-section>
<q-card-section>
  <q-btn-toggle
    v-model="toggleStandardPayments[index]"
    toggle-color="primary"
    :options="standardPayments"
    spread
    @input="onStandardChange(index)"
  />
</q-card-section>

• 第二步：在methods中新增两个互斥处理方法

methods: {
  // 原有方法保留，新增以下两个方法
  onPercentChange(index) {
    // 选中百分比选项时，清空同组固定金额的选中状态
    this.$set(this.toggleStandardPayments, index, null)
    this.getFullTip()
  },
  onStandardChange(index) {
    // 选中固定金额选项时，清空同组百分比的选中状态
    this.$set(this.togglePercentPayments, index, null)
    this.getFullTip()
  },
  // 其余原有方法保持不变
}

扩展优化说明 #

如果你的items是异步加载的，原data中初始化togglePercentPayments和toggleStandardPayments的逻辑可能会出现数组长度和items不匹配的问题，可以增加watch监听items的变化，重新初始化两个绑定数组：

watch: {
  items: {
    immediate: true,
    handler(newVal) {
      this.togglePercentPayments = new Array(newVal.length).fill(null)
      this.toggleStandardPayments = new Array(newVal.length).fill(null)
    }
  },
  // 原有showModal的watch逻辑保留
}

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