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.