The Delightful World of Vue Part 2
Finishing the Cart Controls Component
  Start your All-Access Pass to unlock this challenge
Buy Access Login

Challenge 1 / 1

Here's the same component from the last challenge:

<template>
    <div
        :class="$style.component"
        v-if="pizza !== null"
    >
        <h1>{{ pizza.name }}</h1>

        <p>{{ pizza.description }}</p>

        <div class="order-buttons">
            <button
                @click="orderSlices(1)"
                :disabled="ordering"
            >
                Order 1 slice!
            </button>

            <button
                @click="orderSlices(2)"
                :disabled="ordering"
            >
                This pizza looks great! Order 2 slices!!
            </button>

            <button
                @click="orderSlices(4)"
                :disabled="ordering"
            >
                I'm starving!! Order 4 slices!!!
            </button>
        </div>
    </div>
</template>

<script>
import { getPizza } from '@/services/get-pizza';
import { orderPizza } from '@/services/order-pizza';

export default {
    name: 'ShowPizza',
    data() {
        return {
            pizza: null,
            ordering: false,
        };
    },
    async created() {
        this.pizza = (await getPizza()).data['hydra:member];
    },
    methods: {
        async orderPizza(slices) {
            this.ordering = true;
            await orderPizza(slices);
            this.ordering = false;
        },
    },
};
</script>

<style lang="scss" module>
.component :global {
    overflow: hidden;

    .order-buttons {
        padding-top: 20px;
        margin-top: 20px;
        border-top: 1px solid #FF0000;
    }
}
</style>

We've just moved its order buttons logic into an outside component called order-buttons! After including the order-buttons component, how would this component look like?

Skip challenges and go to theNext Chapter

Turn Challenges Off?

All further challenges will be skipped automatically.
You can re-enable challenges at any time on this page or from your account page.