Custom v-model on components in Vue - Mini Project: Build & Apply

Custom v-model on components

📖 Scenario: You are building a simple Vue app where a parent component uses a child component to edit a user's name. You want to connect the child's input with the parent's data using a custom v-model.

🎯 Goal: Create a child component with a custom v-model binding that updates the parent's userName data reactively.

📋 What You'll Learn

Create a child component named NameInput with a prop named modelValue

Emit an update:modelValue event when the input changes

In the parent component, define a reactive userName variable initialized to 'Alice'

Use the custom v-model syntax to bind userName to the NameInput component

💡 Why This Matters

🌍 Real World

Custom v-model bindings are useful when building reusable form components that need to sync data with their parents in Vue apps.

💼 Career

Understanding custom v-models is important for frontend developers working with Vue to create clean, maintainable, and reactive UI components.

1

Setup parent data

In the parent component's <script setup>, create a reactive variable called userName and set it to the string 'Alice'.

Vue

// Create a reactive variable userName with value 'Alice'
// Your code here

Hint

Use ref from Vue to create a reactive variable.

2

Create child component with modelValue prop

Create a child component named NameInput with a props option that declares a modelValue prop of type String. The component should render an <input> element with its value bound to modelValue.

Vue

import { ref } from 'vue'
const userName = ref('Alice')

// Define NameInput component with modelValue prop
// Your code here

Hint

Use defineComponent and declare props and emits. Bind value and listen for input event.

3

Use custom v-model in parent template

In the parent component's template, use the NameInput component and bind userName to it using the custom v-model syntax: <NameInput v-model:modelValue="userName" />.

Vue

import { ref, defineComponent } from 'vue'
const userName = ref('Alice')

const NameInput = defineComponent({
  props: {
    modelValue: String
  },
  emits: ['update:modelValue'],
  setup(props, { emit }) {
    const updateValue = event => {
      emit('update:modelValue', event.target.value)
    }
    return () => (
      
    )
  }
})



  
  

Hint

Use the v-model:modelValue directive to bind userName to NameInput.

4

Display updated userName

Below the NameInput component in the template, add a <p> element that displays the text User name is: followed by the reactive userName value using interpolation.

Vue

import { ref, defineComponent } from 'vue'
const userName = ref('Alice')

const NameInput = defineComponent({
  props: {
    modelValue: String
  },
  emits: ['update:modelValue'],
  setup(props, { emit }) {
    const updateValue = event => {
      emit('update:modelValue', event.target.value)
    }
    return () => (
      
    )
  }
})



  
  User name is: {{ userName }}
  

Hint

Use mustache syntax {{ userName }} inside a paragraph tag.

Practice

1. What is the default prop name used in a Vue component to work with v-model?

easy

A. inputValue

B. value

C. vModel

D. modelValue

Solution

1. Step 1: Understand Vue's default v-model prop

   Vue uses modelValue as the default prop name to bind data from parent to child.

2. Step 2: Recall the default event name

   The event emitted to update the parent is update:modelValue, matching the prop name.

3. Final Answer:

   modelValue -> Option D

4. Quick Check:

   Default prop for v-model = modelValue [OK]

Hint: Default v-model prop is always 'modelValue' [OK]

Common Mistakes:

• Using 'value' as default prop
• Confusing event name with prop name
• Assuming 'vModel' is default prop

2. Which of the following is the correct syntax to use a custom v-model named checked on a component?

easy

A. <MyCheckbox v-model:checked="isChecked" />

B. <MyCheckbox v-model.checked="isChecked" />

C. <MyCheckbox v-model_checked="isChecked" />

D. <MyCheckbox v-modelChecked="isChecked" />

Solution

1. Step 1: Recall custom v-model syntax

   Vue uses v-model:customName syntax to bind custom model names.

2. Step 2: Match syntax with options

   Only <MyCheckbox v-model:checked="isChecked" /> uses the correct colon syntax for custom v-model binding.

3. Final Answer:

   <MyCheckbox v-model:checked="isChecked" /> -> Option A

4. Quick Check:

   Custom v-model uses colon syntax [OK]

Hint: Use colon for custom v-model names: v-model:customName [OK]

Common Mistakes:

• Using dot instead of colon
• Using underscore instead of colon
• Using camelCase without colon

3. Given this child component code:

props: ['modelValue'],
methods: {
  updateValue(val) {
    this.$emit('update:modelValue', val)
  }
}

And parent usage:

<ChildComponent v-model="parentData" />

What happens when updateValue('new') is called inside the child?

medium

A. The child's modelValue prop changes to 'new'.

B. Nothing happens because event name is wrong.

C. The parent's parentData updates to 'new'.

D. An error occurs because updateValue is not defined.

Solution

1. Step 1: Understand event emission in child

   The child emits update:modelValue with the new value, which Vue listens to for v-model updates.

2. Step 2: Effect on parent data

   The parent bound to v-model receives the event and updates parentData to 'new'.

3. Final Answer:

   The parent's parentData updates to 'new'. -> Option C

4. Quick Check:

   Child emits update:modelValue -> parent updates [OK]

Hint: Child emits update:modelValue event to update parent data [OK]

Common Mistakes:

• Thinking prop changes inside child
• Confusing event name with prop name
• Assuming no update without v-model modifier

4. Identify the error in this child component code for custom v-model named checked:

props: ['checked'],
methods: {
  updateChecked(val) {
    this.$emit('update:checked', val)
  }
}

Parent uses:

<MyCheckbox v-model:checked="isChecked" />

medium

A. Event name should be update:modelValue for custom v-model.

B. Prop name and event name are correct for custom v-model checked.

C. Prop name should be modelValue instead of checked.

D. The method should emit checked event, not update:checked.

Solution

1. Step 1: Check prop and event names for custom v-model

   For v-model:checked, the prop must be checked and event update:checked.

2. Step 2: Verify code matches custom v-model pattern

   The code uses props: ['checked'] and emits update:checked, which is correct.

3. Final Answer:

   Prop name and event name are correct for custom v-model checked. -> Option B

4. Quick Check:

   Custom v-model uses matching prop and update:event [OK]

Hint: Custom v-model uses prop and event names matching the model name [OK]

Common Mistakes:

• Using default modelValue prop for custom v-model
• Emitting wrong event name
• Confusing event and prop names

5. You want to create a component ToggleSwitch that uses a custom v-model named active. Which of these code snippets correctly implements the child component's props and emits to support this?

hard

A. props: ['active'],
methods: {
toggle() {
this.$emit('update:active', !this.active)
}
}

B. props: ['modelValue'],
methods: {
toggle() {
this.$emit('update:modelValue', !this.modelValue)
}
}

C. props: ['active'],
methods: {
toggle() {
this.$emit('update:modelValue', !this.active)
}
}

D. props: ['modelValue'],
methods: {
toggle() {
this.$emit('update:active', !this.modelValue)
}
}

Solution

1. Step 1: Match prop and event names to custom v-model name

   For v-model:active, the prop must be active and event update:active.

2. Step 2: Check each option for correct prop and event

   props: ['active'],
   methods: {
     toggle() {
       this.$emit('update:active', !this.active)
     }
   }

   uses props: ['active'] and emits update:active, matching the custom v-model name.

3. Final Answer:

   props: ['active'], methods: { toggle() { this.$emit('update:active', !this.active) } } -> Option A

4. Quick Check:

   Custom v-model prop and event must match model name [OK]

Hint: Custom v-model prop and event must match the model name exactly [OK]

Common Mistakes:

• Mixing default modelValue with custom names
• Emitting wrong event name
• Using wrong prop name for custom v-model