0

Let's have a sample single file Component:

<template>
  <InputComponent v-model="foo" />
</template>

<script setup>
let foo = 1
</script>

ESLint says: ESLint: 'foo' is never reassigned. Use 'const' instead. (prefer-const)

However since it is used in a v-model directive it is used in a read-write context, it should be okay.

I have installed eslint-plugin-vue and has the parser set to vue-eslint-parser in my .eslintrc. but somehow it does not seem to understand what is going on with the v-model directive.

How to configure ESLint to understand Vue.js v-model directive?

Bence Szalai
  • 768
  • 8
  • 20
  • It should be considered reassigned, since it is used as the model variable of a component which will update the value, thus it is let and not const. – Bence Szalai Aug 06 '22 at 16:38

1 Answers1

0

Based on Vue documentation actually a const should be used, because primitive types should be declared by the ref() helper which returns a proxy which in turn will not be reassigned. So probably the proper code is like this:

<template>
  <InputComponent v-model="foo" />
</template>

<script setup>
import { ref } from 'vue'
const foo = ref(1)
</script>
Bence Szalai
  • 768
  • 8
  • 20