如何从 Vue.js 应用程序中的多组 Quasar 切换按钮获取值？

Question

我们在 Vue.js 应用程序中使用 Quasar 框架。有一个模态对话框，其中有多组切换按钮 (q-btn-toggle)。屏幕截图如下所示：

如你所见，有为客户提供美容服务的女性（师傅）。下面还有2个金额。第一个“摘要”是客户应支付的总金额。第二个“提示”应该根据每个母版旁边的切换按钮组来计算。有两种类型的小费：总额百分比和固定金额。正如您在我的代码中看到的那样，我只能获得一个（对于所有）切换按钮组的值。这意味着当我为任何母版 select 一些按钮时，同样的按钮也会为其他母版 select 编辑。但是，我需要有可能为特定的主人单独 select 不同的按钮。

代码如下所示：

<template>
  <q-dialog v-model="show" no-backdrop-dismiss full-width>
    <q-card>
      <q-card-section class="row items-center">
        <div class="text-h6">Tip</div>
        <q-space />
        <q-btn icon="close" flat round dense v-close-popup @click="cancel" />
      </q-card-section>
      <q-card-section style="max-height: 50vh" class="scroll set-border">
        <div class="q-gutter-md">
          <q-card v-for="{ master } in items" :key="master.id">
            <div class="row">
              <div class="col-2 flex justify-center items-center">
                <Avatar
                  :src="master.employer_avatar"
                  :size="50"
                  no-default-spinner
                />
              </div>
              <div class="col">
                <q-card-section>
                  <q-btn-toggle
                    v-model="togglePercentPayment"
                    toggle-color="primary"
                    :options="percentPayments"
                    spread
                    @input="getFullTip"
                  />
                </q-card-section>
                <q-card-section>
                  <q-btn-toggle
                    v-model="toggleStandardPayment"
                    toggle-color="primary"
                    :options="standardPayments"
                    spread
                    @input="getFullTip"
                  />
                </q-card-section>
              </div>
            </div>
          </q-card>
        </div>
      </q-card-section>
      <q-card-section>
        <div><strong>Summary:</strong> {{ total }} руб.</div>
        <div>
          <strong>Tip:</strong> {{ getFullTip() ? getFullTip() : 0 }} руб.
        </div>
      </q-card-section>
      <q-card-actions align="right" class="text-primary q-pt-none">
        <q-btn flat label="Pay" @click="pay" />
        <q-btn flat label="Cancel" @click="cancel" />
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>

<script>
const percentPayments = [
  { label: '5%', value: 5 },
  { label: '10%', value: 10 },
  { label: '15%', value: 15 },
]

const standardPayments = [
  { label: '100', value: 100 },
  { label: '200', value: 200 },
  { label: '500', value: 500 },
]

export default {
  props: {
    showModal: {
      type: Boolean,
      default: false,
    },
    items: {
      type: Array,
      default: () => [],
    },
    total: {
      type: Number,
      default: 0,
    },
  },
  data: function() {
    return {
      show: false,
      togglePercentPayment: null,
      toggleStandardPayment: null,
      percentPayments,
      standardPayments,
    }
  },
  watch: {
    showModal(newVal) {
      this.show = newVal
    },
  },
  methods: {
    getPercentage(total, percent) {
      return (total / 100) * percent
    },
    getFullTip() {
      const percentToggleSum = this.getPercentage(
        this.total,
        this.togglePercentPayment,
      )
      return percentToggleSum + this.toggleStandardPayment
    },
    pay() {
      this.$emit('pay', this.getFullTip())
      this.clear()
    },
    cancel() {
      this.$emit('cancel')
      this.clear()
    },
    clear() {
      this.togglePercentPayment = null
      this.toggleStandardPayment = null
    },
  },
}
</script>

<style scoped>
.set-border {
  border: 1px solid gainsboro;
}
</style>

我的问题是如何实现？

Answer 1

我觉得togglePercentPayment和toggleStandardPayment应该是数组。因为你只考虑了所有主人的两个变量，所以很自然地，它们都相互依赖。

您可以将它们定义为数组。 data 属性:

这样的事情

data: function() {
    return {
      show: false,
      togglePercentPayment: [null, null],
      toggleStandardPayment: [null, null],
      percentPayments,
      standardPayments,
    }
},

在模板部分：

<q-card v-for="({ master }, index) in items" :key="master.id">
    <div class="row">
        <div class="col-2 flex justify-center items-center">
                <Avatar
                  :src="master.employer_avatar"
                  :size="50"
                  no-default-spinner
                />
              </div>
              <div class="col">
                <q-card-section>
                  <q-btn-toggle
                    v-model="togglePercentPayment[index]"
                    toggle-color="primary"
                    :options="percentPayments"
                    spread
                    @input="getFullTip"
                  />
                </q-card-section>
                <q-card-section>
                  <q-btn-toggle
                    v-model="toggleStandardPayment[index]"
                    toggle-color="primary"
                    :options="standardPayments"
                    spread
                    @input="getFullTip"
                  />
            </q-card-section>
        </div>
   </div>
</q-card>

另外，如果master的个数不一定等于2，可以根据masters的长度构造数组。像这样：

data: function() {
    return {
      show: false,
      togglePercentPayment: new Array(this.items.length).fill(null),
      toggleStandardPayment: new Array(this.items.length).fill(null),
      percentPayments,
      standardPayments,
    }
},

如何从 Vue.js 应用程序中的多组 Quasar 切换按钮获取值？

How to get the values from multiple groups of Quasar toggle buttons in Vue.js app?

javascript

vue.js

quasar-framework