1---
2title: Dynamic Directive Arguments Have Syntax Constraints
3impact: MEDIUM
4impactDescription: Invalid dynamic arguments cause silent failures or browser compatibility issues
5type: capability
6tags: [vue3, template, directives, v-bind, v-on, dynamic-arguments]
7---
8 
9# Dynamic Directive Arguments Have Syntax Constraints
10 
11**Impact: MEDIUM** - Dynamic directive arguments (e.g., `:[attributeName]`, `@[eventName]`) have value and syntax constraints that can cause silent failures. In-DOM templates also have case sensitivity issues with browsers lowercasing attribute names.
12 
13Dynamic arguments allow runtime determination of which attribute or event to bind, but they have restrictions that differ from static arguments.
14 
15## Task Checklist
16 
17- [ ] Ensure dynamic arguments evaluate to strings or `null`
18- [ ] Avoid spaces and quotes inside dynamic argument brackets
19- [ ] Use computed properties for complex dynamic argument expressions
20- [ ] In in-DOM templates, use lowercase attribute names or switch to SFCs
21- [ ] Use `null` to explicitly remove a binding
22 
23**Incorrect:**
24```vue
25<template>
26  <!-- ERROR: Spaces and quotes not allowed in dynamic arguments -->
27  <a :[' foo' + bar]="value">Link</a>
28  <a :["data-" + name]="value">Link</a>
29 
30  <!-- WARNING: Non-string values (except null) trigger warnings -->
31  <a :[123]="value">Link</a>
32  <a :[someObject]="value">Link</a>
33 
34  <!-- BUG in in-DOM templates: Browsers lowercase attribute names -->
35  <!-- This becomes :[someattr] which won't match someAttr -->
36  <a :[someAttr]="url">Link</a>
37</template>
38 
39<script setup>
40// If component expects someAttr but browser lowercases to someattr
41// the binding silently fails
42const someAttr = 'href'
43</script>
44```
45 
46**Correct:**
47```vue
48<template>
49  <!-- OK: Simple variable reference -->
50  <a :[attributeName]="url">Link</a>
51 
52  <!-- OK: Use computed property for complex expressions -->
53  <a :[dynamicAttr]="value">Link</a>
54 
55  <!-- OK: null removes the binding -->
56  <button :[disabledAttr]="isDisabled">Submit</button>
57 
58  <!-- OK: Dynamic event names -->
59  <button @[eventName]="handler">Click</button>
60 
61  <!-- OK: In SFCs, case is preserved -->
62  <a :[someAttr]="url">Link</a>
63</template>
64 
65<script setup>
66import { ref, computed } from 'vue'
67 
68// Simple string variable
69const attributeName = ref('href')
70const url = ref('https://vuejs.org')
71 
72// Complex expression via computed property
73const prefix = ref('data')
74const name = ref('id')
75const dynamicAttr = computed(() => `${prefix.value}-${name.value}`)
76 
77// Conditional binding with null
78const isDisabled = ref(false)
79const disabledAttr = computed(() => isDisabled.value ? 'disabled' : null)
80 
81// Dynamic events
82const useTouch = ref(false)
83const eventName = computed(() => useTouch.value ? 'touchstart' : 'click')
84 
85function handler() {
86  console.log('Event triggered')
87}
88</script>
89```
90 
91## In-DOM Template Workaround
92 
93When writing templates directly in HTML (not SFCs), use lowercase:
94 
95```html
96<!-- In-DOM template (index.html) -->
97<div id="app">
98  <!-- Use lowercase to avoid browser issues -->
99  <a :[attrname]="url">Link</a>
100</div>
101 
102<script type="module">
103import { createApp, ref } from 'vue'
104 
105createApp({
106  setup() {
107    // Match the lowercase used in template
108    const attrname = ref('href')
109    const url = ref('https://vuejs.org')
110    return { attrname, url }
111  }
112}).mount('#app')
113</script>
114```
115 
116## SFC vs In-DOM Templates
117 
118| Feature | SFC (.vue files) | In-DOM (HTML) |
119|---------|------------------|---------------|
120| Case sensitivity | Preserved | Lowercased by browser |
121| Dynamic arguments | Full support | Lowercase only |
122| Recommendation | Preferred | Use for progressive enhancement |
123 
124## Valid Dynamic Argument Values
125 
126```vue
127<script setup>
128// String values - OK
129const attr1 = 'href'
130const attr2 = 'data-custom'
131 
132// null - OK (removes binding)
133const attr3 = null
134 
135// undefined - OK (removes binding)
136const attr4 = undefined
137 
138// Numbers, objects, arrays - WARNING
139const attr5 = 123        // Warning: should be string
140const attr6 = { foo: 1 } // Warning: should be string
141</script>
142```
143 
144## Reference
145- [Vue.js Template Syntax - Dynamic Arguments](https://vuejs.org/guide/essentials/template-syntax.html#dynamic-arguments)
146- [Vue.js Template Syntax - Dynamic Argument Value Constraints](https://vuejs.org/guide/essentials/template-syntax.html#dynamic-argument-value-constraints)
147