Challenge #2 of 2

So I just set up this awesome helper that "helps" me put pineapple on top of regular pizzas! Yum! Here it is:

export default (pizzaTopping) => (
    pizzaTopping + ' with Pineapple!'
);

Now I want to use it in my pizza component so that every pizza topping has pineapple on it! Which of these examples would not make it work?

<template>
    <h1>{{ pizza.name }}</h1>

    <h2>Topping:</h2>

    <p>{{ pizzaTopping }}</p>
</template>

<script>
import getPizzaWithPineapple from '@/helpers/get-pizza-with-pineapple';

export default {
    name: 'PizzaComponent',
    props: ['pizza'],
    computed: {
        pizzaTopping() {
            return getPizzaWithPineapple(pizza.topping);
        },
    },
};
</script>

<template>
    <h1>{{ pizza.name }}</h1>

    <h2>Topping:</h2>

    <p>{{ getPizzaWithPineapple(pizza.topping) }}</p>
</template>

<script>
import getPizzaWithPineapple from '@/helpers/get-pizza-with-pineapple';

export default {
    name: 'PizzaComponent',
    props: ['pizza'],
};
</script>

<template>
    <h1>{{ pizza.name }}</h1>

    <h2>Topping:</h2>

    <p>{{ getPizzaTopping() }}</p>
</template>

<script>
import getPizzaWithPineapple from '@/helpers/get-pizza-with-pineapple';

export default {
    name: 'PizzaComponent',
    props: ['pizza'],
    methods: {
        getPizzaTopping() {
            return getPizzaWithPineapple(pizza.topping);
        }
    },
};
</script>

<template>
    <h1>{{ pizza.name }}</h1>

    <h2>Topping:</h2>

    <p>{{ pizzaTopping }}</p>
</template>

<script>
import getPizzaWithPineapple from '@/helpers/get-pizza-with-pineapple';

export default {
    name: 'PizzaComponent',
    props: ['pizza'],
    data() {
        return {
            pizzaTopping: getPizzaWithPineapple(pizza.topping)
        };
    },
};
</script>

Rewatch Video

TRACK

JavaScript Frameworks & Tools >

COURSE

The Delightful World of Vue >

CHAPTER

Business Logic Helpers

Challenge #2 of 2