noVueTextareaMustache (HTML)

Language HTML

Summary

Rule available since: v2.6.5
Diagnostic Category: lint/nursery/noVueTextareaMustache
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-textarea-mustache

How to configure

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

Description

Disallow {{ }} text interpolation inside a Vue <textarea>.

In most elements, Vue replaces {{ expression }} with the value of the expression. Vue doesn’t support this inside a <textarea>. To show a value in a textarea and keep it up to date, bind it with v-model instead.

Vue doesn’t process {{ }} inside an element that has v-pre, or inside its children, so the rule ignores those textareas.

Examples

Invalid

1
<template>
2
  <textarea>{{ message }}</textarea>
3
</template>

code-block.vue:2:13 lint/nursery/noVueTextareaMustache ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ {{ }} can't be used inside a <textarea>.
  
    1 │ <template>
  > 2 │   <textarea>{{ message }}</textarea>
      │             ^^^^^^^^^^^^^
    3 │ </template>
    4 │ 
  
  ℹ Vue doesn't support text interpolation inside a textarea.
  
  ℹ Bind the value of the textarea with v-model 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
<template>
2
  <textarea v-model="message"></textarea>
3
  <textarea v-pre>{{ message }}</textarea>
4
</template>

References

Vue guide: multiline text in forms