如何在Vue.js应用中获取多组Quasar q-btn-toggle切换按钮的选中值

问题原因 #

当前所有技师的切换按钮共用了全局的togglePercentPayment、toggleStandardPayment两个绑定变量，导致任意一个按钮被选中，所有技师的对应按钮都会同步变化。只需要将选中状态按技师ID单独存储即可解决。

修改步骤 #

1. 修改状态定义
   将data中两个全局状态改为对象，以技师ID为key存储对应选中值：

data: function() {
  return {
    show: false,
    // 以技师ID为key存储对应选中值
    togglePercentPayment: {},
    toggleStandardPayment: {},
    percentPayments,
    standardPayments,
  }
},

2. 初始化选中状态
   打开弹窗时为每个技师初始化默认选中值，保证响应式：

watch: {
  showModal(newVal) {
    this.show = newVal
    if (newVal) {
      this.items.forEach(({master}) => {
        // Vue2环境用$set保证响应式，Vue3可直接赋值
        this.$set(this.togglePercentPayment, master.id, null)
        this.$set(this.toggleStandardPayment, master.id, null)
      })
    }
  },
},

3. 修改模板绑定
   将q-btn-toggle的v-model绑定改为对应技师ID的属性：

<!-- 百分比按钮组 -->
<q-btn-toggle
  v-model="togglePercentPayment[master.id]"
  toggle-color="primary"
  :options="percentPayments"
  spread
  @input="getFullTip"
/>
<!-- 固定金额按钮组 -->
<q-btn-toggle
  v-model="toggleStandardPayment[master.id]"
  toggle-color="primary"
  :options="standardPayments"
  spread
  @input="getFullTip"
/>

4. 重写小费计算逻辑
   遍历所有技师的选中值累加总小费：

getFullTip() {
  let totalTip = 0
  this.items.forEach(({master}) => {
    const percentVal = this.togglePercentPayment[master.id] || 0
    const fixedVal = this.toggleStandardPayment[master.id] || 0
    totalTip += this.getPercentage(this.total, percentVal) + fixedVal
  })
  return totalTip
},

5. 修改清空逻辑

clear() {
  this.togglePercentPayment = {}
  this.toggleStandardPayment = {}
},

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