javascript - 在 Vuejs 中使用复选框和单选按钮计算价格
问题描述
我是 Vue.js 的新手，试图制作这个小型披萨订购应用程序，您可以在其中选择不同价格的披萨大小，如中号、大号和特大号，以及意大利辣香肠、额外奶酪、蘑菇等配料，价格不同，当u 选择披萨尺寸，它将显示该尺寸的价格，如中号是 3000，当您通过选择像意大利辣香肠这样的复选框添加浇头时，价格将添加到中号披萨尺寸中，如果您希望选中所有复选框每个配料的价格应添加到所选披萨大小，如果您未选中，价格应相应降低。到目前为止，我想要的一切都完美无缺，除了当我在比萨大小上选中两个或多个复选框时，它会被添加，但是当我将比萨大小更改为从中到大时，只有最后一个选中的复选框价格被添加到剩余的选中复选框价格被忽略，任何如何解决这个问题的想法都将受到赞赏，甚至是编写此代码的更好方法
这是模板
<template>
<app-layout title="Order Pizza">
<template #header>
<h2 class="font-semibold text-xl text-gray-800 leading-tight">
Order Pizza
</h2>
</template>
<!-- Container -->
<div class="container mx-auto">
<div class="flex justify-center px-6 my-12">
<!-- Row -->
<div class="w-full xl:w-3/4 lg:w-11/12 flex">
<!-- Col -->
<div class="w-full h-auto bg-gray-400 hidden lg:block lg:w-7/12 bg-cover
rounded-l-lg" style="background-image: url('https://images.unsplash.com/photo-
1604382355076-af4b0eb60143?ixlib=rb')"></div>
<!-- Col -->
<div class="w-full lg:w-12/12 bg-white p-2 rounded-lg lg:rounded-l-
none">
<h3 class="pt-4 text-2xl text-center">Make Your Order With Your
Favorite Toppings!</h3>
<form @submit.prevent="store" class="px-2 pt-4 pb-4 mb-4 bg-white
rounded">
<div class="mb-4">
<label class="block mb-2 text-sm font-bold text-gray-700" for="address">
Address
</label>
<input class="w-full px-3 py-2 mb-3 text-sm leading-tight text-
gray-700 border rounded shadow appearance-none focus:outline-none
focus:shadow-outline" id="address" type="address" placeholder="Address" v-model="form.address" />
</div>
<div class="mb-4 md:flex md:justify-between">
<div class="mb-4 md:mr-2 md:mb-0">
<label class="block mb-2 text-sm font-bold text-gray-
700" for="address">
Size
</label>
<div>
<input class="cursor-pointer " @change="setSizePrice($event)" type="radio"
v-bind:value="m" v-model="form.size">
<span class="text-sm px-1">Medium</span>
</div>
<div>
<input class="cursor-pointer" @change="setSizePrice($event)" type="radio"
v-bind:value="l" v-model="form.size">
<span class="text-sm px-1">Large</span>
</div>
<div>
<input class="cursor-pointer" @change="setSizePrice($event)" type="radio"
v-bind:value="xl" v-model="form.size">
<span class="text-sm px-1">Extra Large</span>
</div>
</div>
</div>
<div class="mb-4">
<label class="block mb-2 text-sm font-bold text-gray-700" for="address">
Toppings
</label>
<div id="checkboxes" class="flex">
<div class="md:ml-2">
<input type="checkbox" @change="addToppings($event)" :value="200" id="pepperoni"
v-model="form.toppings" class="rounded border-gray-300 text-indigo-600
shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200
focus:ring-opacity-50" />
<span class="text-sm pl-1 pr-2">Pepperoni</span>
</div>
<div class="md:ml-2">
<input type="checkbox" @change="addToppings($event)" :value="300"
id="extracheese" v- model="form.toppings" class="rounded border-gray-300 text-indigo-600
shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200
focus:ring-opacity-50" />
<span class="text-sm pl-1 pr-2">Extra
Cheese</span>
</div>
<div class="md:ml-2">
<input type="checkbox" @change="addToppings($event)" :value="400" id="mushrooms"
v-model="form.toppings" class="rounded border-gray-300 text-indigo-600
shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200
focus:ring-opacity-50" />
<span class="text-sm pl-1 pr-2">Mushrooms</span>
</div>
<div class="md:ml-2">
<input type="checkbox" @change="addToppings($event)" :value="500"
id="groundbeef" v-model="form.toppings" class="rounded border-gray-300 text-indigo-600
shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo200
focus:ring-opacity-50" />
<span class="text-sm pl-1 pr-2">Ground
Beef</span>
</div>
<div class="md:ml-2">
<input type="checkbox" @change="addToppings($event)" :value="600" id="pineapple"
v-model="form.toppings" class="rounded border-gray-300 text-indigo-600
shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200
focus:ring-opacity-50" />
<span class="text-sm pl-1 pr-2">Pineapple</span>
</div>
</div>
</div>
<div class="mb-4">
<label class="block mb-2 text-sm font-bold text-gray-700" for="instruction">
Instruction
</label>
<input class="w-full px-3 py-2 mb-3 text-sm leading-tight text-
gray-700 border rounded shadow appearance-none focus:outlinenone
focus:shadow-outline" id="instructions" type="instructions" name="instructions"
placeholder="Instructions" v-model="form.instructions" />
</div>
<div class="mb-6 text-center">
<button class="w-full px-4 py-2 font-bold text-white bg-blue-500
rounded-full hover:bg-blue-700 focus:outline-none
focus:shadow-outline">
Place Order
</button>
</div>
<hr class="mb-6 border-t" />
<span>Price: N{{totalPrice ? totalPrice : sizePrice}} </span>
</form>
</div>
</div>
</div>
</div>
</app-layout>
</template>
剧本
<script>
import Checkbox from '../../Jetstream/Checkbox.vue';
import Input from '../../Jetstream/Input.vue';
import AppLayout from '@/Layouts/AppLayout.vue';
export default {
components: { Input, Checkbox, AppLayout },
data: function () {
return {
form: this.$inertia.form({
address: null,
size: null,
toppings: [],
instructions: null,
}),
m: 'medium',
l: 'large',
xl: 'extralarge',
sizeStatus: null,
sizePrice: null,
toppingsPrice: null,
totalPrice: null,
medium: 2000,
large: 3000,
extralarge: 4500,
pizzaSize: null,
pepperoni: 'pepperoni',
extraCheese: 'extracheese',
mushrooms: 'mushrooms',
groundBeef: 'groundbeef',
pineapple: 'pineapple',
toppings: null,
toppingsSum: null,
toppingsStatus: null,
};
},
methods: {
store() {
this.form.post(this.route('order.store'));
},
setSizePrice(event) {
this.pizzaSize = event.target.value;
this.sizeStatus = event.target.checked;
if (this.pizzaSize == this.m) {
this.sizePrice = this.medium;
if (this.toppingsStatus == true && this.sizeStatus == true) {
this.sizePrice += parseInt(this.toppings);
}
} else if (this.pizzaSize == this.l) {
this.sizePrice = this.large;
if (this.toppingsStatus == true && this.sizeStatus == true) {
this.sizePrice += parseInt(this.toppings);
}
} else {
this.sizePrice = this.extralarge;
if (this.toppingsStatus == true && this.sizeStatus == true) {
this.sizePrice += parseInt(this.toppings);
}
}
console.log(this.sizePrice);
},
addToppings(event) {
this.toppings = event.target.value;
this.toppingsStatus = event.target.checked;
if (this.toppingsStatus) {
this.sizePrice += parseInt(this.toppings);
console.log(this.sizePrice);
} else if (this.toppingsStatus == false) {
this.sizePrice -= this.toppings;
console.log(this.sizePrice);
}
},
},
};
</script>
解决方案
推荐阅读
- ruby-on-rails - 如何通过运行 rake 任务并在 rails 控制台中运行相同的查询从 rails 查询中获得相同的输出
- python - GridSearchCV 的分值
- list - 在对象列表（组合列表）上使用 LINQ 获取与用户相关的信息
- azure-devops-server-2019 - Azure devops 服务器文件系统触发器
- javascript - iframe 文件上传器提交到新标签
- f# - 使用附加字段扩展记录
- sql - 删除 SQL Server 2008 的 concat 和 IIF 函数
- python - 在 jupyter notebook 中使用 bash_profile 变量
- .net - .NET 不支持请求的安全协议
- python - 我做了一个登录系统，但是当我运行它时，它出现了一个意想不到的结果，你能修复它或改进它吗？