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?

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

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

        <order-buttons />
    </div>
</template>

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

export default {
    name: 'ShowPizza',
    components: {
        OrderButtons,
    },
    data() {
        return {
            pizza: null,
        };
    },
    async created() {
        this.pizza = (await getPizza()).data['hydra:member];
    },
};
</script>

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

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

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

        <order-buttons />
    </div>
</template>

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

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

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

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

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

        <order-buttons />
    </div>
</template>

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

export default {
    name: 'ShowPizza',
    components: {
        OrderButtons,
    },
    data() {
        return {
            pizza: null,
        };
    },
    async created() {
        this.pizza = (await getPizza()).data['hydra:member];
    },
};
</script>

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

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

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

        <order-buttons />
    </div>
</template>

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

export default {
    name: 'ShowPizza',
    components: {
        OrderButtons,
    },
    data() {
        return {
            pizza: null,
        };
    },
    async created() {
        this.pizza = (await getPizza()).data['hydra:member];
    },
};
</script>

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

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

Rewatch the video