eslint-plugin-vue

eslint-plugin-vue copied to clipboard

Tell us about your environment

• ESLint version: 5.14.1
• eslint-plugin-vue version: 5.2.2
• Node version: 10.15.2

What did you do?

<div>
	<slot name="header">
		<h1>dummy</h1>
	</slot>
	<template v-for="n in cnt">
		<slot name="item" :n="n">
			<h2>Test #{{n}}</h2>
			<component :is="component" v-bind="getTest(n)" />
		</slot>
		<slot name="separator" :n="n">
			<hr />
		</slot>
	</template>
</div>

What did you expect to happen? I have a template with v-for, containing only of slots. I cannot put the key attribute to the slot content, nor can I put it on the slot itself. Still I get the eslint error below:

What actually happened?

Elements in iteration expect to have 'v-bind:key' directives vue/require-v-for-key

Similar problem here. I'm using material-components-vue. And I write code as following.

<template v-for="(value, key) in description">
  <m-text-field :id="key">
    <m-floating-label :for="key">{{value.name}}</m-floating-label>
    <m-line-ripple slot="bottomLine"/>
  </m-text-field>
  <m-text-field-helper-text>
     Helper Text
  </m-text-field-helper-text>
</template>

It complains the rule 'valid-v-for'.

I can't add key to template. If I add keys to the text field and the helper text. ESLint won't complain, but there's warning in console 'Duplicate keys detected'.

And I don't want to replace template with div.

The same problem occurs not only in slot declarations but also when user provides slot content using v-for:

<template
    v-for="slot in ['slot1', 'slot2']"
    v-slot:[slot]
>
    <span>foo</span>
</template>

vue/require-v-for-key complains span should have v-key but actually it should not.

but actually it should not

Why shouldn't it?

If I add keys to the text field and the helper text. ESLint won't complain, but there's warning in console 'Duplicate keys detected'.

Note that you can (and should!) apply different keys, e.g.

<template v-for="(value, key) in description">
  <m-text-field :key="`${key}-field`" :id="key">…</m-text-field>
  <m-text-field-helper-text :key="`${key}-helper`">…</m-text-field-helper-text>
</template>