v-once directive should be used properly

  • VUE_USELESS_V_ONCE
  • Error
  • High
  • vue

This rule applies when v-once directive is wrongly used.

v-once directive has the meaning of rendering an element only once.
However, when v-once is used inside v-for iteration that is not keyed, it becomes useless as follows:

  • For single-file component with a .vue extension, Vue throws a compile error
  • For uncompiled templates, Vue ignores the meaning of v-once and outputs a warning message

Noncompliant Code Example

View with compliant examples side by side
<template>
  <div>
    <div v-for="item in list" @click="handleClick">
      <span v-once>message: {{ item.message }}</span> <!-- VUE_USELESS_V_ONCE alarm because 'v-once' is used in the child of a node using 'v-for' without 'key'. -->
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        list: [{ message: 'hi' }, { message: 'bye' }]
      };
    },
    methods: {
      handleClick() {
        this.list[0].message = 'hello';
      }
    }
  }
</script>

Compliant Code Example

View with noncompliant examples side by side
<template>
  <div>
    <div v-for="item in list" @click="handleClick" :key="item.key">
      <span v-once>message: {{ item.message }}</span>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        list: [{ key: 'hiKey', message: 'hi' }, { key: 'byeKey', message: 'bye' }]
      };
    },
    methods: {
      handleClick() {
        this.list[0].message = 'hello';
      }
    }
  }
</script>

Version

This rule was introduced in DeepScan 1.15.0-beta.

See

  • v-once directive

  • [Vue warn]: Error compiling template: … - v-once can only be used inside v-for that is keyed.