Dynamic attribute names in Vue - Step-by-Step Execution

Concept Flow - Dynamic attribute names

Start Vue Component Setup

↓

Define reactive data

↓

Use dynamic attribute binding

↓

Vue template compiles

↓

Attribute name resolved from data

↓

Attribute applied to element

↓

Rendered output updates

↓

User sees element with dynamic attribute

Vue reads the attribute name from reactive data and applies it dynamically to the element during rendering.

Execution Sample

Vue

<template>
  <input :[attrName]="value" />
</template>

<script setup>
import { ref } from 'vue'
const attrName = ref('placeholder')
const value = ref('Enter text')
</script>

This Vue component binds an input attribute dynamically using the value of attrName.

Execution Table

Step	Action	attrName.value	value.value	Dynamic Attribute Applied	Rendered Output
1	Component setup starts	placeholder	Enter text	none yet	<input> (not rendered)
2	Vue compiles template	placeholder	Enter text	placeholder	<input placeholder="Enter text">
3	Reactive data changes attrName to 'title'	title	Enter text	title	<input title="Enter text">
4	Reactive data changes value to 'Type here'	title	Type here	title	<input title="Type here">
5	attrName changes back to 'aria-label'	aria-label	Type here	aria-label	<input aria-label="Type here">
6	value changes to 'Accessible input'	aria-label	Accessible input	aria-label	<input aria-label="Accessible input">
7	Component unmounts	aria-label	Accessible input	none	(component removed)

💡 Component unmounts, stopping reactive updates and rendering.

Variable Tracker

Variable	Start	After 2	After 3	After 4	After 5	After 6	Final
attrName	placeholder	placeholder	title	title	aria-label	aria-label	aria-label
value	Enter text	Enter text	Enter text	Type here	Type here	Accessible input	Accessible input

Key Moments - 3 Insights

Why does the attribute name change on the element when attrName changes?

Because Vue tracks reactive variables like attrName and updates the DOM attribute dynamically as shown in execution_table rows 3 and 5.

What happens if attrName changes to a name that is not a valid HTML attribute?

Vue still applies it as an attribute, but it may not affect the element visually or functionally. The execution_table shows attribute names changing dynamically regardless of validity.

Why do we use square brackets around attrName in :[attrName]?

The square brackets tell Vue to treat attrName as a dynamic key, not a literal attribute name. This is why the attribute name changes as attrName changes, as seen in the execution_table.

Visual Quiz - 3 Questions

Look at the execution_table at step 3. What attribute is applied to the input element?

A placeholder

B aria-label

C title

D value

💡 Hint

Check the 'Dynamic Attribute Applied' column at step 3 in the execution_table.

At which step does the input element get the attribute 'aria-label'?

A Step 5

B Step 4

C Step 2

D Step 6

💡 Hint

Look for when attrName.value changes to 'aria-label' in the execution_table.

If value changes to 'Hello' at step 4 instead of 'Type here', what will be the rendered attribute value?

A "Type here"

B "Hello"

C "Enter text"

D "Accessible input"

💡 Hint

Check the 'value.value' column at step 4 in the variable_tracker and execution_table.

Concept Snapshot

Dynamic attribute names in Vue:
Use :[attrName]="value" syntax.
attrName is reactive and controls the attribute key.
Value sets the attribute's value.
Vue updates the DOM attribute when attrName or value changes.
Useful for flexible, data-driven attributes.

Full Transcript

This visual execution shows how Vue handles dynamic attribute names using the syntax :[attrName]. The component defines reactive variables attrName and value. Initially, attrName is 'placeholder' and value is 'Enter text'. Vue compiles the template and applies the attribute placeholder="Enter text" to the input element. When attrName changes to 'title', Vue updates the attribute to title="Enter text". Changing value updates the attribute's value accordingly. Later, attrName changes to 'aria-label' and value updates to 'Accessible input', and Vue reflects these changes in the rendered input element. The execution table tracks each step, showing how reactive data drives dynamic attribute binding. This helps beginners see how Vue's reactivity updates the DOM attributes dynamically without manual DOM manipulation.

Practice

1. What does v-bind:[attrName] do in Vue?

easy

A. Creates a new component named attrName.

B. Binds the attribute literally named 'attrName' to the element.

C. Binds a static attribute called 'v-bind'.

D. Binds an attribute with a name stored in the variable attrName dynamically.

Solution

1. Step 1: Understand v-bind usage

   v-bind is used to bind attributes dynamically in Vue templates.

2. Step 2: Analyze dynamic attribute syntax

   Using square brackets like v-bind:[attrName] means the attribute name is taken from the variable attrName, not a fixed string.

3. Final Answer:

   Binds an attribute with a name stored in the variable attrName dynamically. -> Option D

4. Quick Check:

   Dynamic attribute name = variable inside brackets [OK]

Hint: Square brackets mean attribute name is from a variable [OK]

Common Mistakes:

• Thinking v-bind:[attrName] binds attribute literally named 'attrName'
• Confusing dynamic binding with static attribute binding
• Assuming it creates a new component
• Using v-bind without brackets for dynamic names

2. Which of the following is the correct syntax to bind a dynamic attribute named by the variable attr in Vue?

easy

A. <div v-bind:[attr]>

B. <div v-bind:attr>

C. <div :attr>

D. <div :[attr]>

Solution

1. Step 1: Recall dynamic attribute binding syntax

   Dynamic attribute names require square brackets around the variable name inside v-bind or shorthand :.

2. Step 2: Check each option

   <div v-bind:attr> binds a static attribute named 'attr'. <div v-bind:[attr]> correctly uses v-bind:[attr]. <div :attr> binds a static attribute named 'attr'. <div :[attr]> is invalid syntax.

3. Final Answer:

   <div v-bind:[attr]> -> Option A

4. Quick Check:

   Use brackets for dynamic attribute names [OK]

Hint: Use brackets around variable for dynamic attribute [OK]

Common Mistakes:

• Omitting brackets for dynamic attribute names
• Using shorthand without brackets incorrectly
• Confusing static and dynamic attribute binding

3. Given this Vue template snippet:

<template>
  <button v-bind:[dynamicAttr]="value">Click</button>
</template>

<script setup>
const dynamicAttr = 'aria-label'
const value = 'Submit Button'
</script>

What attribute will the rendered button have?

medium

A. value="Submit Button"

B. dynamicAttr="Submit Button"

C. aria-label="Submit Button"

D. No attribute will be added

Solution

1. Step 1: Identify the dynamic attribute name

   The variable dynamicAttr holds the string 'aria-label', so the attribute name will be 'aria-label'.

2. Step 2: Understand the binding value

   The value bound to this attribute is the string 'Submit Button'.

3. Final Answer:

   aria-label="Submit Button" -> Option C

4. Quick Check:

   Variable value used as attribute name [OK]

Hint: Variable value becomes attribute name, value assigned as usual [OK]

Common Mistakes:

• Using variable name as attribute name literally
• Confusing attribute name with value
• Expecting no attribute added

4. What is wrong with this Vue template code?

<div v-bind:dynamicAttr="value">Hello</div>

<script setup>
const dynamicAttr = 'title'
const value = 'Greeting'
</script>

medium

A. It will cause a syntax error because v-bind needs brackets.

B. It will bind an attribute literally named 'dynamicAttr', not 'title'.

C. It will bind the attribute 'value' instead of 'title'.

D. There is no error; it works as expected.

Solution

1. Step 1: Check the binding syntax

   Without brackets, v-bind:dynamicAttr binds an attribute literally named 'dynamicAttr'.

2. Step 2: Understand dynamic attribute binding

   To use the variable's value as attribute name, brackets are required: v-bind:[dynamicAttr].

3. Final Answer:

   It will bind an attribute literally named 'dynamicAttr', not 'title'. -> Option B

4. Quick Check:

   Missing brackets means static attribute name [OK]

Hint: Use brackets for dynamic attribute names, else static name used [OK]

Common Mistakes:

• Forgetting brackets for dynamic attribute names
• Assuming variable name is used as attribute name
• Thinking this causes syntax error

5. You want to create a Vue component that accepts a prop attrName and attrValue, then binds the attribute named by attrName with attrValue on a <div>. Which code correctly implements this?

hard

A. <template>
<div :[attrName]="attrValue">Content</div>
</template>

<script setup>
const props = defineProps(['attrName', 'attrValue'])
</script>

B. <template>
<div v-bind:attrName="attrValue">Content</div>
</template>

<script setup>
const props = defineProps(['attrName', 'attrValue'])
</script>

C. <template>
<div :attrName="attrValue">Content</div>
</template>

<script setup>
const props = defineProps(['attrName', 'attrValue'])
</script>

D. <template>
<div v-bind:[attrName]="attrValue">Content</div>
</template>

<script setup>
const props = defineProps(['attrName', 'attrValue'])
</script>

Solution

1. Step 1: Understand dynamic attribute binding with props

   To bind an attribute dynamically using a prop, use the shorthand : with brackets around the prop name: :[attrName].

2. Step 2: Check each option's syntax

   <template>
     <div v-bind:[attrName]="attrValue">Content</div>
   </template>
   
   <script setup>
   const props = defineProps(['attrName', 'attrValue'])
   </script>

   correctly uses quotes around attrValue.

   <template>
     <div v-bind:attrName="attrValue">Content</div>
   </template>
   
   <script setup>
   const props = defineProps(['attrName', 'attrValue'])
   </script>

   and C bind static attribute 'attrName'.

   <template>
     <div :attrName="attrValue">Content</div>
   </template>
   
   <script setup>
   const props = defineProps(['attrName', 'attrValue'])
   </script>

   and

   <template>
     <div :[attrName]="attrValue">Content</div>
   </template>
   
   <script setup>
   const props = defineProps(['attrName', 'attrValue'])
   </script>

   correctly use :[attrName]="attrValue" with props defined, but

   <template>
     <div :[attrName]="attrValue">Content</div>
   </template>
   
   <script setup>
   const props = defineProps(['attrName', 'attrValue'])
   </script>

   uses the shorthand syntax preferred in Vue.

3. Final Answer:

   <div :[attrName]="attrValue">Content</div> -> Option A

4. Quick Check:

   Use :[attrName]="attrValue" for dynamic binding [OK]

Hint: Use :[variable]="value" syntax for dynamic attribute binding [OK]

Common Mistakes:

• Omitting quotes around binding value
• Using static attribute name instead of dynamic
• Confusing shorthand and full syntax