What are dynamic arguments and v-bind shorthand? | Interview Question

Q: What are dynamic arguments and v-bind shorthand?

**Target Audience:** Vue beginners who know what `v-bind` and `v-on` do and want the full picture of their syntax. **Difficulty:** Easy > **How to read this doc:** Plain language first, then `📌 Interview term:` callouts. The compiled code, compiler errors, runtime errors and DOM output below came from running Vue 3.5.44 (`@vue/compiler-dom` for compiler output, jsdom for the runtime). ## 1. Why This Even Matters — A Story First Think of a label maker at a warehouse. Normally the operator types what goes **on** a label: "Fragile". That is a normal binding: the attribute name is fixed (`title`), only its value changes. Now imagine the operator also gets to choose **which sticker sheet** to print on: sometimes the red "hazard" sheet, sometimes the blue "returns" sheet. The kind of label is decided at runtime too. That is a dynamic argument: the attribute **name** itself (`title` or `aria-describedby`, `click` or `dblclick`) comes from your state. And shorthands are just the operator

The problem

Question presented to candidate: "In a Vue template I see :id, :[attrName]="value", @[eventName]="handler" and v-bind="attrs". Walk me through what each of these does and where the limits of dynamic arguments are."

What a strong answer should cover:

: is shorthand for v-bind: and @ for v-on:; the part after the colon is the directive argument.
A dynamic argument in square brackets (:[key], @[event]) computes the attribute or event name from state; null removes the binding.
Constraints: the expression must evaluate to a string (or null), cannot contain spaces or quotes, and in in-DOM templates the browser lowercases it.
Same-name shorthand (Vue 3.4+): :id means :id="id".
v-bind="obj" with no argument spreads an object of attributes, and in Vue 3 the order relative to other attributes decides who wins.
Modifiers: .prop (shorthand .name), .attr, .camel.

Clarifying questions expected:

"Are these templates compiled by the build (SFCs) or written directly in the HTML page (in-DOM templates)?"

Code / implementation expected: Optional. A short template showing a dynamic attribute and event name is enough; reading the compiled output is a bonus.

v-bind
dynamic

Try it yourself

Sketch your approach before you read the solution. That is what the interview tests.

Stuck? Get a hint.

A short nudge toward the approach. It will not give the answer away.

Solution

Target Audience: Vue beginners who know what v-bind and v-on do and want the full picture of their syntax. Difficulty: Easy

How to read this doc: Plain language first, then 📌 Interview term: callouts. The compiled code, compiler errors, runtime errors and DOM output below came from running Vue 3.5.44 (@vue/compiler-dom for compiler output, jsdom for the runtime).

1. Why This Even Matters — A Story First

Think of a label maker at a warehouse. Normally the operator types what goes on a label: "Fragile". That is a normal binding: the attribute name is fixed (title), only its value changes.

Now imagine the operator also gets to choose which sticker sheet to print on: sometimes the red "hazard" sheet, sometimes the blue "returns" sheet. The kind of label is decided at runtime too. That is a dynamic argument: the attribute name itself (title or `ar

The solution is hidden so you can try first

9 min read · 10 sections

Read the code

VueDynamic attribute and event names, same-name shorthand, v-bind object

Open in playground

<script setup>
import { ref } from "vue";

const attrName = ref("title");
const eventName = ref("click");
const log = ref([]);
const id = "save-btn";
const disabled = ref(false);
const extra = { "data-role": "primary", "aria-label": "Save the form" };

function onEvent(e) {
  log.value.push(e.type);
}
function swap() {
  attrName.value = attrName.value === "title" ? "aria-describedby" : "title";
  eventName.value = eventName.value === "click" ? "dblclick" : "click";
}
</script>

<template>
  <!-- :[attrName] is a dynamic argument: the attribute NAME comes from state -->
  <!-- :id is same-name shorthand for :id="id" (Vue 3.4+) -->
  <!-- v-bind="extra" spreads an object of attributes -->
  <button
    :id
    :[attrName]="'hint'"
    @[eventName]="onEvent"
    :disabled="disabled"
    v-bind="extra"
  >Save</button>
  <button class="swap" @click="swap">swap</button>
  <p>events seen: {{ log.join(", ") || "none" }}</p>
</template>

Discussion

Other approaches, follow-ups and how it went in real interviews.

Sign in to join the discussion.

No comments yet. Share how you would answer it.

The solution is hidden so you can try first

Keep your momentum going.