Attribute binding with v-bind in Vue - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the rendered output of this Vue template?

Consider the following Vue component template using v-bind for attribute binding:

<template>
  <button v-bind:disabled="isDisabled">Click Me</button>
</template>

<script setup>
import { ref } from 'vue'
const isDisabled = ref(true)
</script>

What will the button look like in the browser?

Vue

<template>
  <button v-bind:disabled="isDisabled">Click Me</button>
</template>

<script setup>
import { ref } from 'vue'
const isDisabled = ref(true)
</script>

A The button is hidden from the page.

B The button is disabled and cannot be clicked.

C The button is visible but has no text.

D The button is enabled and clickable.

💡 Hint

Think about what the disabled attribute does when set to true.

The v-bind:disabled binds the disabled attribute to the reactive variable isDisabled. Since isDisabled is true, the button will be disabled and not clickable.

📝 Syntax

intermediate

Which option correctly binds the href attribute in Vue?

You want to bind a dynamic URL to an anchor tag's href attribute using Vue's v-bind. Which of the following is syntactically correct?

A <a v-bind:href="url">Link</a>

B <a v-bind(href)="url">Link</a>

C <a :href=url>Link</a>

D <a v-bind:href=url>Link</a>

💡 Hint

Remember the correct syntax for v-bind with attribute names and values.

The correct syntax is v-bind:href="url" or shorthand :href="url". Option A uses the full correct syntax. Option A is missing quotes around the value, which is invalid. Option A uses incorrect parentheses. Option A is missing quotes around the value.

🔧 Debug

advanced

Why does this attribute binding not update dynamically?

Given this Vue component snippet:

<template>
  <img v-bind:src="imageSrc" alt="Image"/>
</template>

<script setup>
const imageSrc = './img1.png'

setTimeout(() => {
  imageSrc = './img2.png'
}, 2000)
</script>

Why does the image not change after 2 seconds?

Vue

<template>
  <img v-bind:src="imageSrc" alt="Image"/>
</template>

<script setup>
const imageSrc = './img1.png'

setTimeout(() => {
  imageSrc = './img2.png'
}, 2000)
</script>

A Because the setTimeout function is not allowed inside <code>&lt;script setup&gt;</code>.

B Because the <code>v-bind</code> directive does not work with <code>src</code> attributes.

C Because imageSrc is not reactive; it should be a ref to update dynamically.

D Because the image path './img2.png' is invalid and cannot load.

💡 Hint

Think about how Vue tracks changes to variables to update the DOM.

In Vue, only reactive variables trigger updates. Here, imageSrc is a plain constant string, not reactive. Using ref makes it reactive and allows Vue to update the image source dynamically.

❓ state_output

advanced

What is the value of the title attribute after clicking the button?

Examine this Vue component:

<template>
  <button v-bind:title="tooltip" @click="changeTooltip">Hover me</button>
</template>

<script setup>
import { ref } from 'vue'
const tooltip = ref('Initial tip')
function changeTooltip() {
  tooltip.value = 'Updated tip'
}
</script>

After clicking the button once, what is the title attribute shown on hover?

Vue

<template>
  <button v-bind:title="tooltip" @click="changeTooltip">Hover me</button>
</template>

<script setup>
import { ref } from 'vue'
const tooltip = ref('Initial tip')
function changeTooltip() {
  tooltip.value = 'Updated tip'
}
</script>

A No title attribute is present

B Initial tip

C An empty string

D Updated tip

💡 Hint

Consider how reactive variables update bound attributes on events.

The title attribute is bound to the reactive tooltip. Clicking the button calls changeTooltip, which updates tooltip.value. Vue updates the attribute to 'Updated tip'.

🧠 Conceptual

expert

Which option best explains why v-bind is preferred over string interpolation for binding attributes?

In Vue, you can bind attributes using v-bind or by using string interpolation inside attribute values. For example:

<img v-bind:src="imageUrl" />
<img src="{{ imageUrl }}" />

Why is v-bind the preferred method for binding attributes?

A <code>v-bind</code> ensures the attribute updates reactively and handles special attributes correctly, while string interpolation inside attributes does not update reactively and can cause invalid HTML.

B <code>v-bind</code> only works with event handlers, not attributes, so string interpolation is needed for attributes.

C String interpolation is faster and more efficient, but <code>v-bind</code> is easier to write.

D String interpolation automatically escapes HTML, while <code>v-bind</code> does not, making string interpolation safer.

💡 Hint

Think about how Vue updates the DOM when data changes and how attributes behave.

v-bind creates a reactive binding to the attribute, so when the data changes, Vue updates the attribute automatically. String interpolation inside attributes is static and does not update reactively. Also, v-bind handles boolean and special attributes properly, avoiding invalid HTML.