@@ -32,16 +32,22 @@ This rule enforces `v-bind` directive style which you should use shorthand or lo
32
32
33
33
## :wrench : Options
34
34
35
- Default is set to ` shorthand ` .
35
+ Default style is set to ` shorthand ` . And default same-name shorthand is ` ignore ` .
36
36
37
37
``` json
38
38
{
39
- "vue/v-bind-style" : [" error" , " shorthand" | "longform" ]
39
+ "vue/v-bind-style" : [" error" , " shorthand" | "longform", {
40
+ "sameNameShorthand" : " ignore" | "always" | "never"
41
+ } ]
40
42
}
41
43
```
42
44
43
45
- ` "shorthand" ` (default) ... requires using shorthand.
44
46
- ` "longform" ` ... requires using long form.
47
+ - ` sameNameShorthand ` ... enforce the ` v-bind ` same-name shorthand style (Vue 3.4+).
48
+ - ` "ignore" ` (default) ... ignores the same-name shorthand style.
49
+ - ` "always" ` ... always enforces same-name shorthand where possible.
50
+ - ` "never" ` ... always disallow same-name shorthand where possible.
45
51
46
52
### ` "longform" `
47
53
@@ -59,6 +65,38 @@ Default is set to `shorthand`.
59
65
60
66
</eslint-code-block >
61
67
68
+ ### ` { "sameNameShorthand": "always" } `
69
+
70
+ <eslint-code-block fix :rules =" {'vue/v-bind-style': ['error', 'shorthand', { 'sameNameShorthand': 'always' }]} " >
71
+
72
+ ``` vue
73
+ <template>
74
+ <!-- ✓ GOOD -->
75
+ <div :foo />
76
+
77
+ <!-- ✗ BAD -->
78
+ <div :foo="foo" />
79
+ </template>
80
+ ```
81
+
82
+ </eslint-code-block >
83
+
84
+ ### ` { "sameNameShorthand": "never" } `
85
+
86
+ <eslint-code-block fix :rules =" {'vue/v-bind-style': ['error', 'shorthand', { 'sameNameShorthand': 'never' }]} " >
87
+
88
+ ``` vue
89
+ <template>
90
+ <!-- ✓ GOOD -->
91
+ <div :foo="foo" />
92
+
93
+ <!-- ✗ BAD -->
94
+ <div :foo />
95
+ </template>
96
+ ```
97
+
98
+ </eslint-code-block >
99
+
62
100
## :books : Further Reading
63
101
64
102
- [ Style guide - Directive shorthands] ( https://vuejs.org/style-guide/rules-strongly-recommended.html#directive-shorthands )
0 commit comments