noVueDeprecatedVBindSync (HTML)

Language HTML

Summary

Rule available since: v2.6.5
Diagnostic Category: lint/nursery/noVueDeprecatedVBindSync
This rule has an unsafe fix.
The default severity of this rule is error.
This rule belongs to the following domains:
- vue
Sources:
- Same as vue/no-deprecated-v-bind-sync

How to configure

1
{
2
  "linter": {
3
    "rules": {
4
      "nursery": {
5
        "noVueDeprecatedVBindSync": "error"
6
      }
7
    }
8
  }
9
}

Description

Disallow the .sync modifier on Vue v-bind directives.

In Vue 2, adding .sync to a v-bind directive let a child component update the value it received from its parent. Vue 3 removed the .sync modifier. The value is still passed to the child component, but changes made by the child are no longer sent back to the parent.

Use v-model with an argument instead. For example, replace :title.sync="pageTitle" with v-model:title="pageTitle". If .sync is used on a whole object, as in v-bind.sync="page", use a separate v-model for each property of the object.

Examples

Invalid

1
<MyComponent v-bind:title.sync="pageTitle" />

code-block.vue:1:26 lint/nursery/noVueDeprecatedVBindSync  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ The .sync modifier on v-bind is deprecated.
  
  > 1 │ <MyComponent v-bind:title.sync="pageTitle" />
      │                          ^^^^^
    2 │ 
  
  ℹ Vue 3 removed this modifier, so changes made by the child component are no longer sent back to this value.
  
  ℹ Use v-model with the same argument instead, e.g. v-model:title="pageTitle".
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.
  
  ℹ Unsafe fix: Use v-model instead.
  
    1   │ - <MyComponent·v-bind:title.sync="pageTitle"·/>
      1 │ + <MyComponent·v-model:title="pageTitle"·/>
    2 2 │

1
<MyComponent :title.sync="pageTitle" />

code-block.vue:1:20 lint/nursery/noVueDeprecatedVBindSync  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ The .sync modifier on v-bind is deprecated.
  
  > 1 │ <MyComponent :title.sync="pageTitle" />
      │                    ^^^^^
    2 │ 
  
  ℹ Vue 3 removed this modifier, so changes made by the child component are no longer sent back to this value.
  
  ℹ Use v-model with the same argument instead, e.g. v-model:title="pageTitle".
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.
  
  ℹ Unsafe fix: Use v-model instead.
  
    1   │ - <MyComponent·:title.sync="pageTitle"·/>
      1 │ + <MyComponent·v-model:title="pageTitle"·/>
    2 2 │

1
<MyComponent v-bind.sync="page" />

code-block.vue:1:20 lint/nursery/noVueDeprecatedVBindSync ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ The .sync modifier on v-bind is deprecated.
  
  > 1 │ <MyComponent v-bind.sync="page" />
      │                    ^^^^^
    2 │ 
  
  ℹ Vue 3 removed this modifier, so changes made by the child component are no longer sent back to this value.
  
  ℹ Use a separate v-model for each property of the object instead, e.g. v-model:title="page.title".
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.

Valid

1
<MyComponent v-model:title="pageTitle" />
2
<MyComponent :title="pageTitle" />
3
<MyComponent v-bind="page" />

References

Vue 3 migration guide: v-model