V-for error by vscode and eslint

I use vscode with Vue and I also have the Vetur extension installed in vscode.

My code is this:

<component
   class="h"
   v-for="h, index in toc"
   :is="'h' + h.level"
   :key="index"
   :title="'h' + h.level"
>{{ h.text }}</component>

To see the error I also add a screenshot:

The error is only in vscode, not in the browser so the code itself runs fine, but the error in vscode is disturbing.

vue

When I hover the first underlined row I get this message:

[vue/valid-v-for]
‘v-for’ directives require that attribute value.eslint-plugin-vue

When I hover the second underlined row I get this message:

[vue/valid-v-for]
Expected ‘v-bind:key’ directive to use the variables which are defined by the ‘v-for’ directive.eslint-plugin-vue

I don’t understand what these error messages want me to do here.

  • I’ve tried to add a string before index to make sure the key is not a number but that does not make a difference.
  • I’ve also tried to combine the index with the h.text as key, also with no difference, same error.

Any ideas?

1 Like

try putting the index and value in parens: v-for=“h, index) in toc”

1 Like

Writing v-for="(h, index) in toc" actually worked! Thanks!