Variable used in 'key' appears as unused #329

Kruptein · 2021-07-24T15:44:00Z

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>

The text was updated successfully, but these errors were encountered:

johnsoncodehk · 2021-07-26T03:58:58Z

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

bartenra · 2022-01-26T10:17:20Z

Sorry for posting a duplicate!

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

johnsoncodehk · 2022-01-26T10:33:52Z

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

Zehir · 2022-09-20T22:44:15Z

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 · 2022-09-21T14:29:22Z

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

Kruptein · 2022-09-21T15:11:35Z

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 · 2022-09-21T15:16:50Z

By using a _ prefix to your variables names ?

Kruptein · 2022-09-21T15:21:36Z

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 · 2022-09-21T15:32:13Z

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

Kruptein · 2022-09-21T15:36:58Z

In this case an array of strings.

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

johnsoncodehk · 2022-09-21T15:47:14Z

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 · 2022-09-21T15:51:43Z

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 · 2023-03-09T23:32:23Z

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 · 2024-03-05T07:05:53Z

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

paescuj · 2024-03-05T11:30:44Z

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

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

GRyanParoz · 2024-05-29T04:35:59Z

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 · 2024-05-29T10:56:54Z

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

GRyanParoz · 2024-05-30T05:10:54Z

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

Sorry, I misread the above update. Disregard!

vincerubinetti · 2024-07-24T01:15:51Z

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

{
  "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

{
  "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!

- fix unit of Public Water System Violations - use `cent_lat` and `cent_long` that have apparently always been in the backend, instead of using turf.js to calc center of mass for label positions - rearrange api funcs a bit - ~move `index` -> `_index` to avoid [this volar issue](vuejs/language-tools#329 - try to make AppMap component more re-usable/generic - remove popup content. replace with slot and make popup content the responsibility of consuming/parent component. - make prop types generic instead of being tied to api functions - tweak feature info popup data handling - move "onMoveEnd" map handler to top level so its debouncing can be cancelled on unmount - remove "map.remove" call because it is already getting called before map mount (and calling it there [throws an error](Leaflet/Leaflet#4806) for some reason... leaflet just doesn't play well with modern web frameworks) - for positioning feature labels, get info right from feature properties field - tweak feature label appearance - move tooltip that shows unit to just one place, the top left legend - move feature popup content to SectionMap page component, with some typing (FeatureInfo) - change logic of when certain stats (total/min/max/avg/etc) show or not - add some util ts types

johnsoncodehk added the bug Something isn't working label Jul 24, 2021

johnsoncodehk added the upstream label Jul 26, 2021

johnsoncodehk mentioned this issue Aug 13, 2021

v-for | variable is declared but its value is never read | ts(6133) johnsoncodehk/vue-tsc#59

Closed

panwauu mentioned this issue Jan 20, 2022

ts(6133): never read in v-for if only using the index #878

Closed

johnsoncodehk mentioned this issue Jan 26, 2022

<template v-for="(item, index) in items" :key="index" gives "'index' is declared but its value is never read" #898

Closed

johnsoncodehk mentioned this issue May 22, 2022

Syntax highlight and TS support doesn't work on the same HTML tag #1328

Closed

This was referenced Mar 29, 2023

<template> not getting intellisense help when used on :key attribute in a v-for #2485

Closed

[Bug] 'i' is declared but its value is never read. ts(6133) #2503

Closed

johnsoncodehk mentioned this issue May 1, 2023

TS6133: 'index' is declared but its value is never read when using <template> with headlessui #2719

Closed

so1ve mentioned this issue Jun 27, 2023

vue-tsc:1.7.12 memory heep size #3281

Closed

johnsoncodehk mentioned this issue Jun 28, 2023

template with v-for and index does not recognise :key="index" #3139

Closed

so1ve mentioned this issue Jul 19, 2023

No typescript checks on <template> expressions #3421

Closed

makedopamine mentioned this issue Sep 18, 2023

refactor(descriptions): improve types element-plus/element-plus#14313

Merged

so1ve mentioned this issue Jan 11, 2024

When I use v-for on the template, I use the index as the key, and the prompt index is declared but its value is never read and vue-tsc cannot pass the verification. #3850

Closed

johnsoncodehk closed this as completed in cb54032 May 13, 2024

vincerubinetti mentioned this issue Jul 24, 2024

Misc frontend refactors and tweaks colorado-cancer-center/ecco#87

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Variable used in 'key' appears as unused #329

Variable used in 'key' appears as unused #329

Kruptein commented Jul 24, 2021

johnsoncodehk commented Jul 26, 2021

bartenra commented Jan 26, 2022

johnsoncodehk commented Jan 26, 2022

Zehir commented Sep 20, 2022

johnsoncodehk commented Sep 21, 2022

Kruptein commented Sep 21, 2022 •

edited

Loading

Zehir commented Sep 21, 2022 •

edited

Loading

Kruptein commented Sep 21, 2022

Zehir commented Sep 21, 2022

Kruptein commented Sep 21, 2022 •

edited

Loading

johnsoncodehk commented Sep 21, 2022

Kruptein commented Sep 21, 2022

matthew-dean commented Mar 9, 2023

hl037 commented Mar 5, 2024

paescuj commented Mar 5, 2024 •

edited

Loading

GRyanParoz commented May 29, 2024

so1ve commented May 29, 2024

GRyanParoz commented May 30, 2024

vincerubinetti commented Jul 24, 2024 •

edited

Loading

Variable used in 'key' appears as unused #329

Variable used in 'key' appears as unused #329

Comments

Kruptein commented Jul 24, 2021

johnsoncodehk commented Jul 26, 2021

bartenra commented Jan 26, 2022

johnsoncodehk commented Jan 26, 2022

Zehir commented Sep 20, 2022

johnsoncodehk commented Sep 21, 2022

Kruptein commented Sep 21, 2022 • edited Loading

Zehir commented Sep 21, 2022 • edited Loading

Kruptein commented Sep 21, 2022

Zehir commented Sep 21, 2022

Kruptein commented Sep 21, 2022 • edited Loading

johnsoncodehk commented Sep 21, 2022

Kruptein commented Sep 21, 2022

matthew-dean commented Mar 9, 2023

hl037 commented Mar 5, 2024

paescuj commented Mar 5, 2024 • edited Loading

GRyanParoz commented May 29, 2024

so1ve commented May 29, 2024

GRyanParoz commented May 30, 2024

vincerubinetti commented Jul 24, 2024 • edited Loading

Kruptein commented Sep 21, 2022 •

edited

Loading

Zehir commented Sep 21, 2022 •

edited

Loading

Kruptein commented Sep 21, 2022 •

edited

Loading

paescuj commented Mar 5, 2024 •

edited

Loading

vincerubinetti commented Jul 24, 2024 •

edited

Loading