ref attribute should not be redundantly defined

• VUE_REDUNDANT_REF_ATTRIBUTE
• Error
• Medium
• vue

This rule applies when a ref attribute becomes redundant because the referenced value is always overwritten by another ref with the same name.

Even though Vue throws no error in this case, it can lead to an unintended behavior when the ignored value is actually needed. If the value is not needed, it is recommended to remove the useless ref attribute for code readability and maintainability.

Note that this rule is not applied if the later ref is on a conditional element (e.g. element having v-if) because it does not always overwrite the previous ref.

Noncompliant Code Example

<template>
  <div>
    <!-- Example 1 -->
    <foo ref="fooRef" /> <!-- VUE_REDUNDANT_REF_ATTRIBUTE alarm -->
    <bar ref="fooRef" />

    <!-- Example 2 -->
    <comp1 v-if="cond" ref="compRef" /> <!-- VUE_REDUNDANT_REF_ATTRIBUTE alarm -->
    <comp2 ref="compRef" />
  </div>
</template>

Compliant Code Example

<template>
  <div>
    <!-- Example 1 -->
    <foo ref="fooRef" />
    <bar ref="barRef" />

    <!-- Example 2 -->
    <comp1 v-if="cond" ref="compRef" />
    <comp2 v-else ref="compRef" />
  </div>
</template>

Version

This rule was introduced in DeepScan 1.40.0.

See

• ref