时间戳

首页 > 解决方案 > 如何从 Vue.js 应用程序中的多组 Quasar 切换按钮中获取值？

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

问题描述

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

在此处输入图像描述

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

代码如下所示：

<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>

我的问题是如何实现它？

标签： javascriptvue.jsquasar-framework

解决方案

我认为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,
    }
},

推荐阅读