noVueComputedPropertiesInData (JavaScript)

Language JavaScript (and super languages)

Summary

Rule available since: v2.6.4
Diagnostic Category: lint/nursery/noVueComputedPropertiesInData
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-computed-properties-in-data

How to configure

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

Description

Disallow using computed properties inside the data function of a Vue component.

Vue runs the data function before it sets up the component’s computed properties. Reading a computed property there through this gives undefined instead of the computed value.

Only code written directly in data is checked. Code inside a function created in data, such as an arrow function stored as a data property, is not reported.

Examples

Invalid

1
<script>
2
export default {
3
  data() {
4
    return {
5
      total: this.doubled,
6
    };
7
  },
8
  computed: {
9
    doubled() {
10
      return 2;
11
    },
12
  },
13
};
14
</script>

code-block.vue:5:14 lint/nursery/noVueComputedPropertiesInData ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ The computed property doubled is used inside the data function.
  
    3 │   data() {
    4 │     return {
  > 5 │       total: this.doubled,
      │              ^^^^^^^^^^^^
    6 │     };
    7 │   },
  
  ℹ The computed property is declared here.
  
     7 │   },
     8 │   computed: {
   > 9 │     doubled() {
       │     ^^^^^^^
    10 │       return 2;
    11 │     },
  
  ℹ Vue runs the data function before it sets up computed properties, so this value is undefined.
  
  ℹ Compute the value from props or other data instead, or turn this data property into a computed property.
  
  ℹ 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: ["initial"],
4
  data() {
5
    return {
6
      count: this.initial,
7
      label: this.formatLabel(),
8
      read: () => this.doubled,
9
    };
10
  },
11
  computed: {
12
    doubled() {
13
      return this.count * 2;
14
    },
15
  },
16
  methods: {
17
    formatLabel() {
18
      return "Count";
19
    },
20
  },
21
};
22
</script>