Challenge 1 / 1

We are in the process of building a nice checkout form for our pizza customers. It looks something like this:

<template>
    <form>
        <p>Please, enter your info here:</p>

        <fancy-input
            id="name"
            v-model="client.name"
            label="Name:"
        />
    </form>
</template>

We have just written the first input for the customer's name and we want it to be a custom component. But we've forgotten how to implement v-model in a custom component in Vue 2!

Which of these templates in fancy-input.vue would do the trick, assuming our component has a prop value of type String?

<input
    type="text"
    :value="value"
    @input="$emit('input', $event.target.value)"
>

<input
    type="text"
    :value="value"
    @input="$emit('input', $event)"
>

<input
    type="text"
    :value="value"
    @change="$emit('input', $event.target.value)"
>

<input
    type="text"
    :value="value"
    @keyup="$emit('input', $event.target.value)"
>

Rewatch the video