Challenge #2 of 2

Q:
In my CarTitle component, I receive a `car` prop that contains both `model` and `brand` as separate keys. These two keys change when a user selects different options from 2 `select` elements that exist elsewhere on the page.

What I'd like to do is "listen" to these prop change and automatically update the car title in the template.

Which of these examples would do the job in the best way?

<template>
    <h1>{{ carName }}</h1>
</template>

<script>
export default {
    name: 'CarTitle',
    props: ['car'],
    computed: {
        carName() {
            return car.brand + ' ' + car.model;
        },
    },
};
</script>

<template>
    <h1>{{ carName }}</h1>
</template>

<script>
export default {
    name: 'CarTitle',
    props: ['car'],
    data() {
        return {
            carName: car.brand + ' ' + car.model,
        };
    },
    watchers: {
        car(newVal) {
            this.carName = newVal.brand + ' ' + newVal.model;
        },
    },
};
</script>

<template>
    <h1>{{ carName }}</h1>
</template>

<script>
export default {
    name: 'CarTitle',
    props: ['car'],
    data() {
        return {
            carName: this.getCarName(),
        };
    },
    methods: {
        getCarName() {
            return car.brand + ' ' + car.model;
        },
    },
};
</script>

<template>
    <h1>{{ getCarName }}</h1>
</template>

<script>
export default {
    name: 'CarTitle',
    props: ['car'],
    methods: {
        getCarName() {
            return car.brand + ' ' + car.model;
        },
    },
};
</script>

Rewatch Video

TRACK

JavaScript Frameworks & Tools >

COURSE

The Delightful World of Vue >

CHAPTER

Adding a Watcher

Challenge #2 of 2