Dynamic attribute names in Vue - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What attribute does this Vue component render dynamically?

Consider this Vue 3 component using the Composition API. What attribute will the rendered <input> element have?

Vue

<template>
  <input v-bind:[dynamicAttr]="inputValue" />
</template>

<script setup>
import { ref } from 'vue'
const dynamicAttr = 'placeholder'
const inputValue = ref('Enter your name')
</script>

A An input with a placeholder attribute set to 'Enter your name'

B An input with a value attribute set to 'Enter your name'

C An input with a dynamicAttr attribute set to 'Enter your name'

D An input with no attributes set

💡 Hint

Look at how the attribute name is set using square brackets inside the binding.

The syntax v-bind:[dynamicAttr] means Vue will use the value of the variable dynamicAttr as the attribute name. Since dynamicAttr is 'placeholder', the input will have a placeholder attribute with the value from inputValue.

📝 Syntax

intermediate

Which option correctly binds a dynamic attribute in Vue 3?

Which of the following Vue template bindings correctly sets a dynamic attribute name stored in attrName with value attrValue?

A <input v-bind:attrName="attrValue" />

B <input :attrName="attrValue" />

C <input :[attrName]="attrValue" />

D <input v-bind:[attrName]="attrValue" />

💡 Hint

Remember that dynamic attribute names require square brackets inside the binding directive.

Option D uses v-bind:[attrName] which is the correct syntax for dynamic attribute names in Vue. Option D is also valid shorthand syntax for dynamic attribute names. Option D and C bind literally to an attribute named 'attrName'.

🔧 Debug

advanced

Why does this dynamic attribute binding not work as expected?

Given this Vue 3 component snippet, why does the dynamic attribute not appear on the <button> element?

Vue

<template>
  <button :[attr]="true">Click me</button>
</template>

<script setup>
const attr = null
</script>

A Because the value true is invalid for any attribute

B Because the button element does not support dynamic attributes

C Because <code>attr</code> is null, Vue cannot set a dynamic attribute with a null name

D Because dynamic attributes require the value to be a string

💡 Hint

Check the value of the variable used for the attribute name.

Vue uses the value of attr as the attribute name. Since attr is null, Vue cannot create an attribute with a null name, so no attribute is rendered.

❓ state_output

advanced

What is the rendered output after clicking the button?

In this Vue 3 component, clicking the button toggles the dynamic attribute name. What attribute does the button have after the first click?

Vue

<template>
  <button :[attrName]="true" @click="toggle">Toggle</button>
</template>

<script setup>
import { ref } from 'vue'
const attrName = ref('disabled')
function toggle() {
  attrName.value = attrName.value === 'disabled' ? 'aria-pressed' : 'disabled'
}
</script>

A The button has the attribute disabled="true"

B The button has the attribute aria-pressed="true"

C The button has both disabled and aria-pressed attributes

D The button has no attributes

💡 Hint

Think about how the attribute name changes after the click.

Initially, attrName is 'disabled'. After the first click, it changes to 'aria-pressed'. The button then has aria-pressed="true" and no longer has the disabled attribute.

🧠 Conceptual

expert

Why use dynamic attribute names in Vue components?

Which of the following best explains a practical reason to use dynamic attribute names in Vue?

A To conditionally bind different HTML attributes based on component state or props without repeating code

B To enable two-way data binding on any attribute automatically

C To improve performance by avoiding re-rendering of static attributes

D To allow Vue to generate unique attribute names for CSS styling

💡 Hint

Think about why you might want to change attribute names dynamically instead of hardcoding them.

Dynamic attribute names let you reuse the same binding logic to set different attributes depending on conditions, making components more flexible and reducing repeated code.

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