Start your All-Access Pass to unlock this challenge
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