Challenge 3 / 3

Let's say we have a class called .controversial-flavor in a modular css tag. We want to assign this class to an element in the template if our pizza cointains pineapple. For this, we've constructed a component like this:

<template>
    <div :class="$style.component">
      <span>{{ pizza.name }}</span>
    </div>
</template>

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

<style lang="scss" module>
.component {
    width: 120px;
    display: inline-block

    .controversial-flavor {
        color: red;
    }
}
</style>

We know that pizza has a property called containsPineapple, which is a boolean. How can we conditionally show the .controversial-flavor class if the pizza contains pineapple?