Variable used in 'key' appears as unused

[Kruptein]

The below template gives a "'i' is declared but its value is never read." in both volar and vue-tsc.

<template v-for="[i, part] of someObject" :key="i">
  {{ part }}
</template>

While the i is indeed not used inside the template itself, it is used in the key and can thus not simply be removed.

A temporary workaround can be:

<template v-for="something of someObject" :key="something[0]">
  {{ something[1] }}
</template>

[johnsoncodehk]

Vue template AST doesn't provide key binding from ForNode so we can't fix it yet.

[bartenra]

Sorry for posting a duplicate!

How can I tell Volar to ignore an issue in a template?

[johnsoncodehk]

@bartenra you can use _index instead of index as variable name.

[Zehir]

Vue template AST doesn't provide key binding from ForNode so we can't fix it yet.

Is there any changes about this issue in the last year ? Thanks

[johnsoncodehk]

@Zehir unfortunately we have nothing can do here, you can open an issue in vue/core repo.

[Kruptein]

This actually nowadays works properly in my setup. Unsure if I should close the issue or not given that apparently Zehir still has issues.

[Zehir]

By using a _ prefix to your variables names ?

[Kruptein]

No, with the proper names.

I just tested the following quickly:

<div v-for="[i, layer] of layers" :key="i">
    {{ layer }}
</div>

and this does not complain. If I remove the key section it properly complains that i is not used.

[Zehir]

I have 2 project, in one of them I don't have the issue. What is the type definition of layers ?

[Kruptein]

In this case an array of strings.

ComputedRef<LayerName[]> to be precise, with LayerName being a string enum

[johnsoncodehk]

I just tested the following quickly:

<div v-for="[i, layer] of layers" :key="i">
    {{ layer }}
</div>

This problem is only happen with <template> tag but not html element / component tag.

[Kruptein]

This problem is only happen with <template> tag but not html element / component tag.

Aaah right, my bad, the initial PR is quite a while ago, so I hastily assumed that it was for all iterations :D

Sorry for the confusion Zehir :)

[matthew-dean]

Just ran into this. What's weird is Volar actually knows / infers the type of the item in the collection, so it knows its being used, but also doesn't know its being used.

      <template
        v-for="item in value"
        :key="item.id"
      >

In the above, item autocompletes with id

[hl037]

Any news since last year ? (still getting the error)

[paescuj]

Any news since last year ? (still getting the error)

I think https://github.com/vuejs/language-tools/issues/329#issuecomment-886352723 is still the case.

[GRyanParoz]

Any news since last year ? (still getting the error)

I think #329 (comment) is still the case.

Is there a relevant issue for Vue regarding this? It's been nearly 3 years, seems like a long time for an issue to exist, albeit one that just causes problems with static analysis tools.

[so1ve]

This issue is now resolved, doesn't it work for you? @GRyanParoz

[GRyanParoz]

This issue is now resolved, doesn't it work for you? @GRyanParoz

Sorry, I misread the above update. Disregard!

[vincerubinetti]

Sorry, I'm a little confused at the discussion above. Is this fixed across the board? I'm still getting a slight warning of an unused variable:

(Note the faded color of index in the v-for)

vue-tsc runs fine, so not an issue there. That screenshot is saying the warning is coming from "ts"... so I'm not sure which part of the language tools that's coming from... I guess the language server and ts plugin?

tsconfig.json

```json { "extends": ["@vue/tsconfig/tsconfig.json"], "include": ["src/**/*", "./*", "src/**/*.json"], "compilerOptions": { "composite": true, "esModuleInterop": true, "lib": ["ESNext", "DOM", "DOM.Iterable"], "noEmit": true, "noErrorTruncation": true, "noUncheckedIndexedAccess": true, "paths": { "@/*": ["./src/*"] }, "resolveJsonModule": true, "strict": true, "target": "ESNext" } } ```

package.json

```json { "type": "module", "scripts": { "dev": "vite", "build": "vue-tsc --noEmit && vite build", "preview": "vite preview", "lint": "eslint . --ext .vue,.ts --fix && prettier --write \"**/*.{vue,ts,css,scss,md}\"", "test:spelling": "bunx cspell src/**/*.{vue,ts}" }, "dependencies": { "@fortawesome/fontawesome-svg-core": "^6.6.0", "@fortawesome/free-brands-svg-icons": "^6.6.0", "@fortawesome/free-regular-svg-icons": "^6.6.0", "@fortawesome/free-solid-svg-icons": "^6.6.0", "@fortawesome/vue-fontawesome": "^3.0.8", "@headlessui-float/vue": "^0.14.0", "@headlessui/vue": "^1.7.22", "@turf/turf": "^7.0.0", "@vue/eslint-config-typescript": "^13.0.0", "@vueuse/core": "^10.11.0", "d3": "^7.9.0", "dom-to-image": "^2.6.0", "leaflet": "^1.9.4", "leaflet-providers": "^2.0.0", "lodash": "^4.17.21", "radix-vue": "^1.9.2", "vue": "^3.4.33", "vue-gtag": "^2.0.1", "vue-router": "^4.4.0", "vue-tippy": "^6.4.4" }, "devDependencies": { "@ianvs/prettier-plugin-sort-imports": "^4.3.1", "@types/d3": "^7.4.3", "@types/dom-to-image": "^2.6.7", "@types/geojson": "^7946.0.14", "@types/leaflet": "^1.9.12", "@types/lodash": "^4.17.7", "@vitejs/plugin-vue": "^5.0.5", "@vue/eslint-config-prettier": "^9.0.0", "@vue/tsconfig": "^0.5.1", "eslint": "^8.57.0", "eslint-plugin-vue": "^9.27.0", "eslint-plugin-vuejs-accessibility": "^2.4.0", "postcss": "^8.4.39", "prettier": "^3.3.3", "prettier-plugin-css-order": "^2.1.2", "prettier-plugin-jsdoc": "^1.3.0", "sass": "^1.77.8", "typescript": "^5.5.3", "vite": "^5.3.4", "vue-tsc": "^2.0.28" } } ```

VSCode details

VSCode: v1.91.1 Vue Official extension: v2.0.10 ESLint extension: v3.0.10

Another thing I just noticed is that hovering over :key="index" doesn't show a type for index (or _index, doesn't matter the name). Actually, no popup shows at all.

---

EDIT Nevermind, I guess I was several patch versions behind in my vscode extension (thought I had auto-update on). Updated, and now it's working fine!