Dynamic attribute names in Vue - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to bind a dynamic attribute in Vue.

Vue

<template>
  <input :[[1]]="inputValue" />
</template>

<script setup>
import { ref } from 'vue'
const inputValue = ref('Hello')
const attrName = 'placeholder'
</script>

Drag options to blanks, or click blank then click option'

AattrName

Bplaceholder

Cvalue

Dv-bind

Attempts:

3 left

💡 Hint

Common Mistakes

Using a static string instead of a variable for the attribute name.

Writing the attribute name without the colon : prefix.

In Vue, to bind a dynamic attribute name, you use : followed by a JavaScript expression. Here, attrName holds the attribute name dynamically.

2fill in blank

medium

Complete the code to use a dynamic attribute name with a computed property.

Vue

<template>
  <button :[[1]]="buttonText">Click me</button>
</template>

<script setup>
import { computed } from 'vue'
const attr = computed(() => 'aria-label')
const buttonText = 'Submit'
</script>

Drag options to blanks, or click blank then click option'

Alabel

Baria-label

Cv-bind

Dattr

Attempts:

3 left

💡 Hint

Common Mistakes

Using the attribute name as a string instead of a variable.

Forgetting to use the colon : for binding.

You can bind a dynamic attribute using a computed property by placing the computed variable after the colon :.

3fill in blank

hard

Fix the error in the code to correctly bind a dynamic attribute name.

Vue

<template>
  <div v-bind:[[1]]="value">Content</div>
</template>

<script setup>
const attrName = 'title'
const value = 'Tooltip text'
</script>

Drag options to blanks, or click blank then click option'

AattrName

B'attrName'

Ctitle

Dvalue

Attempts:

3 left

💡 Hint

Common Mistakes

Putting quotes around the variable name, making it a string literal.

Using the attribute name directly instead of the variable.

The v-bind: directive expects a JavaScript expression for the attribute name without quotes. Using attrName correctly binds the dynamic attribute.

4fill in blank

hard

Fill both blanks to create a dynamic attribute binding with a reactive variable.

Vue

<template>
  <input :[[1]]="[2]" />
</template>

<script setup>
import { ref } from 'vue'
const dynamicAttr = ref('maxlength')
const maxLengthValue = ref(10)
</script>

Drag options to blanks, or click blank then click option'

AdynamicAttr

BmaxLengthValue

Cmaxlength

DmaxLength

Attempts:

3 left

💡 Hint

Common Mistakes

Using static strings instead of reactive variables.

Not using the colon : for dynamic binding.

Use the reactive variable dynamicAttr for the attribute name and maxLengthValue for its value to bind dynamically.

5fill in blank

hard

Fill both blanks to create a dynamic attribute binding with a computed attribute name and a reactive value.

Vue

<template>
  <textarea :[[1]]="[2]" rows="4"></textarea>
</template>

<script setup>
import { ref, computed } from 'vue'
const baseName = ref('data')
const suffix = ref('Info')
const attrName = computed(() => baseName.value + suffix.value)
const textValue = ref('Some text')
</script>

Drag options to blanks, or click blank then click option'

AattrName

BtextValue

Cvalue

Dtext

Attempts:

3 left

💡 Hint

Common Mistakes

Using static strings like value or text instead of reactive variables.

Not using the computed property for the attribute name.

The computed property attrName dynamically creates the attribute name (e.g., 'dataInfo'). The reactive variable textValue holds the value to bind.

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