<textarea> withv-model directive should not have children
This rule applies when<textarea> element withv-model directive has non-empty children.
Ifv-model is specified at<textarea>, the contents of<textarea> are completely determined by the value ofv-model.
In this case, the contents specified by the children of<textarea> have no effect.
For example, the following code shows the value ofmessage, but the contents 'Initial value' are ignored:
<textarea v-model="message">Initial value</textarea>| Noncompliant Code Example | Compliant Code Example | ||
|---|---|---|---|
| 1 | <template> | 1 | <template> |
| 2 | <div> | 2 | <div> |
| 3 | <!-- Example 1 (Unnecessary contents) --> | 3 | <!-- Example 1 --> |
| 4 | <textarea v-model="text">{{ text }}</textarea> <!-- VUE_TEXTAREA_WITH_USELESS_CHILDREN alarm --> | 4 | <textarea v-model="text" /> |
| 5 | 5 | ||
| 6 | <!-- Example 2 (Ignored contents) --> | 6 | <!-- Example 2 --> |
| 7 | <textarea v-model="text">Please enter a value</textarea> <!-- VUE_TEXTAREA_WITH_USELESS_CHILDREN alarm --> | 7 | <textarea v-model="text" placeholder="Please enter a value" /> |
| 8 | </div> | 8 | </div> |
| 9 | </template> | 9 | </template> |
<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><template> <div> <!-- Example 1 --> <textarea v-model="text" /> <!-- Example 2 --> <textarea v-model="text" placeholder="Please enter a value" /> </div></template>This rule was introduced in DeepScan 1.17.0-beta.