Блог

Я новичок в Vue.js пытаясь создать это приложение для заказа небольшой пиццы, в котором вы можете выбрать размер пиццы, такой как средний, большой и сверхбольшой, каждый по разной цене, с начинками, такими как пепперони, дополнительный сыр, грибы, в качестве флажков с разными ценами, когда вы выбираете размер пиццы, на нем будет отображаться цена этого размера, например, средний 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 amp;amp; this.sizeStatus == true) {
          this.sizePrice  = parseInt(this.toppings);
        }
      } else if (this.pizzaSize == this.l) {
        this.sizePrice = this.large;

        if (this.toppingsStatus == true amp;amp; this.sizeStatus == true) {
          this.sizePrice  = parseInt(this.toppings);
        }
      } else {
        this.sizePrice = this.extralarge;

        if (this.toppingsStatus == true amp;amp; 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>