noVueDeprecatedDeleteSet (JavaScript)

Language JavaScript (and super languages)

Summary

Rule available since: v2.6.4
Diagnostic Category: lint/nursery/noVueDeprecatedDeleteSet
This rule doesn’t have a fix.
The default severity of this rule is information.
This rule belongs to the following domains:
- vue
Sources:
- Same as vue/no-deprecated-delete-set

How to configure

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

Description

Disallow the $set and $delete functions that Vue 3 removed.

Vue 2 could not detect when a property was added to or deleted from a reactive object, so it provided $set and $delete (also available as Vue.set and Vue.delete, or as set and del imported from vue) to make these changes visible. Vue 3 detects these changes on its own and no longer provides these functions, so calling them throws an error.

Assign the property directly to add it, and use the delete operator to remove it.

See the Vue 3 migration guide for more information.

Examples

Invalid

1
<script>
2
export default {
3
  methods: {
4
    addName() {
5
      this.$set(this.user, "name", "Alice");
6
    }
7
  }
8
};
9
</script>

code-block.vue:5:7 lint/nursery/noVueDeprecatedDeleteSet ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ This calls the Vue set function, which Vue 3 removed.
  
    3 │   methods: {
    4 │     addName() {
  > 5 │       this.$set(this.user, "name", "Alice");
      │       ^^^^^^^^^
    6 │     }
    7 │   }
  
  ℹ Vue 3 detects added and deleted properties on its own, so this function no longer exists and calling it throws an error.
  
  ℹ Assign the property directly instead, for example object.key = value.
  
  ℹ 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.

1
<script>
2
export default {
3
  methods: {
4
    removeName() {
5
      this.$delete(this.user, "name");
6
    }
7
  }
8
};
9
</script>

code-block.vue:5:7 lint/nursery/noVueDeprecatedDeleteSet ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ This calls the Vue delete function, which Vue 3 removed.
  
    3 │   methods: {
    4 │     removeName() {
  > 5 │       this.$delete(this.user, "name");
      │       ^^^^^^^^^^^^
    6 │     }
    7 │   }
  
  ℹ Vue 3 detects added and deleted properties on its own, so this function no longer exists and calling it throws an error.
  
  ℹ Use the delete operator instead, for example delete object.key.
  
  ℹ 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.

1
import Vue from "vue";
2

3
Vue.set(user, "name", "Alice");

code-block.js:3:1 lint/nursery/noVueDeprecatedDeleteSet ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ This calls the Vue set function, which Vue 3 removed.
  
    1 │ import Vue from "vue";
    2 │ 
  > 3 │ Vue.set(user, "name", "Alice");
      │ ^^^^^^^
    4 │ 
  
  ℹ Vue 3 detects added and deleted properties on its own, so this function no longer exists and calling it throws an error.
  
  ℹ Assign the property directly instead, for example object.key = value.
  
  ℹ 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.

1
import { del } from "vue";
2

3
del(user, "name");

code-block.js:3:1 lint/nursery/noVueDeprecatedDeleteSet ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ This calls the Vue delete function, which Vue 3 removed.
  
    1 │ import { del } from "vue";
    2 │ 
  > 3 │ del(user, "name");
      │ ^^^
    4 │ 
  
  ℹ Vue 3 detects added and deleted properties on its own, so this function no longer exists and calling it throws an error.
  
  ℹ Use the delete operator instead, for example delete object.key.
  
  ℹ 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
<script>
2
export default {
3
  methods: {
4
    addName() {
5
      this.user.name = "Alice";
6
    },
7
    removeName() {
8
      delete this.user.name;
9
    }
10
  }
11
};
12
</script>