Challenge 1 / 1

Suppose we have an imaginary component with the following data property:

data() {
    return {
        fruits: [
            'Banana',
            'Strawberry',
            'Pienapple',
            'Apple',
        ],
    };
},

Delicious! Now we want to loop through these fruits and show each of them in a span element. What's the best way to accomplish this?

<span
    v-for="fruit in fruits"
>
    {{ fruit }}
</span>

<div v-for="(fruit, index) in fruits">
    <span
        :key="index"
    >
        {{ fruit }}
    </span>
</div>

<span
    v-for="(fruit, index) in fruits"
    :key="index"
>
    {{ fruit }}
</span>

<span>
    {{ fruits.reduce((fruit, acc) => { acc += 'fruit '; }, ''); }}
</span>

Rewatch the video