noVueDeprecatedPropsDefaultThis (JavaScript)

Language JavaScript (and super languages)

Summary

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

How to configure

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

Description

Disallow this in the default value function of a Vue prop.

When a prop expects an object or an array, its default value is written as a function that returns that value. Vue doesn’t give this function access to the component, so this doesn’t point to the component inside it. Reading another prop with this.name fails. The function receives the props passed to the component as its first argument, so read other props from that argument instead.

Props whose type is Function aren’t checked, because Vue uses their default value as the function itself instead of calling it.

See the Vue 3 migration guide for more information.

Examples

Invalid

1
<script>
2
export default {
3
  props: {
4
    size: Number,
5
    sizes: {
6
      type: Array,
7
      default() {
8
        return [this.size];
9
      },
10
    },
11
  },
12
};
13
</script>

code-block.vue:8:17 lint/nursery/noVueDeprecatedPropsDefaultThis ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ this is used in the default value function of a prop.
  
     6 │       type: Array,
     7 │       default() {
   > 8 │         return [this.size];
       │                 ^^^^
     9 │       },
    10 │     },
  
  ℹ Vue doesn't give this function access to the component, so this doesn't point to the component.
  
  ℹ Read other props from the first argument of the function instead, for example default(props) { return props.size }.
  
  ℹ 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
  props: {
4
    size: Number,
5
    sizes: {
6
      type: Array,
7
      default(props) {
8
        return [props.size];
9
      },
10
    },
11
    onSelect: {
12
      type: Function,
13
      default() {
14
        console.log(this.size);
15
      },
16
    },
17
  },
18
};
19
</script>