Dynamic attribute names in Vue - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does 'dynamic attribute names' mean in Vue?

It means you can set an attribute name on an element using a variable or expression, so the attribute changes based on your data.

beginner

How do you bind a dynamic attribute name in Vue template?

Use the v-bind directive with square brackets around the attribute name, like <div v-bind:[attrName]="value">.

intermediate

Why use dynamic attribute names in Vue?

To make your components flexible and reusable by changing attributes like id, class, or aria-label based on data or user input.

beginner

Example: What does <button v-bind:[buttonType]="true"> do if buttonType = 'disabled'?

It adds the disabled attribute to the button, making it disabled because the attribute name is 'disabled' and its value is true.

intermediate

Can dynamic attribute names be used with event listeners in Vue?

Yes, you can use v-on with dynamic event names like v-on:[eventName]="handler" to listen to different events based on data.

How do you bind a dynamic attribute name in Vue?

A v-bind:[attributeName]

B v-bind(attributeName)

C :attributeName

D v-bind.attributeName

Use v-bind with square brackets around the attribute name to bind it dynamically.

What happens if you write

and attr = 'title'?

A An error occurs because attr is a string.

B The div gets an attribute named 'attr' with value 'value'.

C The div gets a title attribute with the value of 'value'.

D The div gets no new attribute.

The attribute name is taken from the variable attr, so it becomes title with the given value.

Can dynamic attribute names be used to set ARIA attributes in Vue?

A Yes, to improve accessibility dynamically.

B No, ARIA attributes must be static.

C Only for aria-label, not others.

D Only in Vue 2, not Vue 3.

Dynamic attribute names can set any attribute, including ARIA, to help accessibility.

Which Vue directive allows dynamic event names?

A v-bind:[eventName]

B v-on:[eventName]

C v-event:[eventName]

D v-model:[eventName]

v-on with square brackets lets you bind event listeners dynamically.

What is the benefit of using dynamic attribute names in Vue?

A Improves CSS styling automatically.

B Disables reactivity for that attribute.

C Prevents all runtime errors.

D Makes components more flexible and reusable.

Dynamic attribute names let you change attributes based on data, making components flexible.

Explain how to use dynamic attribute names in Vue templates and why they are useful.

Think about how you can change attribute names based on data.

Describe how dynamic attribute names can improve accessibility in Vue applications.

Consider how accessibility attributes might change based on context.