Dynamic attribute names in Vue - Mini Project: Build & Apply

Dynamic Attribute Names in Vue

📖 Scenario: You are building a simple Vue 3 component that displays a button. The button's attribute name changes dynamically based on a variable. This is useful when you want to toggle attributes like disabled, aria-pressed, or others depending on the app state.

🎯 Goal: Create a Vue 3 component that uses a dynamic attribute name bound to a variable. The attribute should be set to true on the button element.

📋 What You'll Learn

Create a reactive variable called attrName with the value 'aria-pressed'.

Create a reactive variable called attrValue with the value true.

Use Vue's : [ ] binding syntax to bind the attribute named by attrName to the value in attrValue on a <button> element.

The button should display the text Toggle.

💡 Why This Matters

🌍 Real World

Dynamic attribute binding is useful in real apps to toggle accessibility attributes or states like 'disabled', 'aria-pressed', or custom data attributes based on user interaction or app state.

💼 Career

Understanding dynamic bindings in Vue is important for frontend developers to build flexible, accessible, and interactive user interfaces.

1

Setup Vue component with reactive attribute name

Create a Vue 3 component using <script setup>. Inside it, create a reactive variable called attrName and set it to the string 'aria-pressed'.

Vue

// Create a reactive variable called attrName with value 'aria-pressed'
// Your code here



  

Hint

Use ref from Vue to create a reactive variable named attrName.

2

Add reactive attribute value

Inside the same <script setup>, create another reactive variable called attrValue and set it to the boolean true.

Vue

import { ref } from 'vue'

const attrName = ref('aria-pressed')
// Create a reactive variable called attrValue with value true
// Your code here



  

Hint

Use ref again to create attrValue with the boolean true.

3

Bind dynamic attribute to button

In the <template>, add a <button> element. Use Vue's dynamic binding syntax with square brackets to bind the attribute named by attrName to the value in attrValue. The button text should be Toggle.

Vue

import { ref } from 'vue'

const attrName = ref('aria-pressed')
const attrValue = ref(true)



  
  

Hint

Use v-bind:[attrName]="attrValue" to bind the dynamic attribute on the button.

4

Complete component with accessibility and responsiveness

Add a type attribute with value button to the <button> element for accessibility. Also, add a simple style block below the template that sets the button's font size to 1.2rem and padding to 0.5rem 1rem.

Vue

import { ref } from 'vue'

const attrName = ref('aria-pressed')
const attrValue = ref(true)



  Toggle



/* Add button styling here */
/* Your code here */

Hint

Remember to add type="button" for accessibility and style the button with CSS inside a <style> block.

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