<textarea> with v-model directive should not have children

• VUE_TEXTAREA_WITH_USELESS_CHILDREN
• Code Quality
• Low
• vue

This rule applies when <textarea> element with v-model directive has non-empty children.

If v-model is specified at <textarea>, the contents of <textarea> are completely determined by the value of v-model.
In this case, the contents specified by the children of <textarea> have no effect.

For example, the following code shows the value of message, but the contents 'Initial value' are ignored:

<textarea v-model="message">Initial value</textarea>

Noncompliant Code Example

<template>
  <div>
    <!-- Example 1 (Unnecessary contents) -->
    <textarea v-model="text">{{ text }}</textarea> <!-- VUE_TEXTAREA_WITH_USELESS_CHILDREN alarm -->

    <!-- Example 2 (Ignored contents) -->
    <textarea v-model="text">Please enter a value</textarea> <!-- VUE_TEXTAREA_WITH_USELESS_CHILDREN alarm -->
  </div>
</template>

Compliant Code Example

<template>
  <div>
    <!-- Example 1 -->
    <textarea v-model="text" />

    <!-- Example 2 -->
    <textarea v-model="text" placeholder="Please enter a value" />
  </div>
</template>

Version

This rule was introduced in DeepScan 1.17.0-beta.

See

• Vue form input bindings for multiline text