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.