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
.vueextension, Vue throws a compile error. - For uncompiled templates, Vue ignores the meaning of
v-onceand 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
[Vue warn]: Error compiling template: … - v-once can only be used inside v-for that is keyed.