noVueDefineModelDefault (JavaScript)

Language JavaScript (and super languages)

Summary

Rule available since: v2.6.8
Diagnostic Category: lint/nursery/noVueDefineModelDefault
This rule doesn’t have a fix.
The default severity of this rule is warning.
This rule belongs to the following domains:
- vue
Sources:
- Same as vue/no-define-model-default

How to configure

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

Description

Disallow default values in Vue’s defineModel().

defineModel() declares a value that a parent component binds with v-model. When the parent passes undefined, for example because its variable has no initial value yet, the child component uses the default value instead. The parent still holds undefined, so the two components show different values for the same model until one of them updates it.

To avoid this, don’t give the model a default value. Give the variable an initial value in the parent component instead.

Examples

Invalid

1
<script setup>
2
const model = defineModel({ type: String, default: "" });
3
</script>

code-block.vue:2:52 lint/nursery/noVueDefineModelDefault ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ The model modelValue has a default value.
  
    1 │ <script setup>
  > 2 │ const model = defineModel({ type: String, default: "" });
      │                                                    ^^
    3 │ </script>
    4 │ 
  
  ℹ When the parent component passes undefined with v-model, this component uses the default value while the parent keeps undefined. The two components then show different values.
  
  ℹ Remove the default value, and give the variable an initial value in the parent component instead.
  
  ℹ 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 setup lang="ts">
2
const count = defineModel<number>("count", { default: 0 });
3
</script>

code-block.vue:2:55 lint/nursery/noVueDefineModelDefault ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ The model count has a default value.
  
    1 │ <script setup lang="ts">
  > 2 │ const count = defineModel<number>("count", { default: 0 });
      │                                                       ^
    3 │ </script>
    4 │ 
  
  ℹ When the parent component passes undefined with v-model, this component uses the default value while the parent keeps undefined. The two components then show different values.
  
  ℹ Remove the default value, and give the variable an initial value in the parent component instead.
  
  ℹ 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 setup lang="ts">
2
const model = defineModel({ type: String, required: true });
3
const count = defineModel<number>("count");
4
</script>