CODEWITHSUNDEEP
vue.jsvue-cli
Charlie Burns
Charlie Burns

Reputation: 7044

Use v_for without v-bind:key as shown in the docs?

The vue docs https://v2.vuejs.org/v2/guide/list.html say I can do this:

<div v-for="(value, name) in object">
  {{ name }}: {{ value }}
</div>

But when I do that I get:

Module Error (from ./node_modules/eslint-loader/index.js):

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

I can work around by saying

    <div v-for="(value, name) in object" v-bind:key="name">

Are the docs wrong? What am I missing?

air:v0 crb$ vue --version
@vue/cli 4.5.6

Command is 'npm run serve' which runs 'vue-cli-service serve'

The whole file:

<template>
  <div class="foo">
    <h1>foo Component</h1>
    <!--
    <div v-for="(value, name) in object" v-bind:key="name">
    --> 
    <div v-for="(value, name) in object">
      {{ name }}: {{ value }}
    </div>
  </div>
</template>

<script>
  export default {
        data() {
                return {
                        object: { 'a': 1, 'b': 2 }
                }
        }
  }
</script>

Upvotes: 1

Views: 2235

Answers (1)

AlekseyHoffman
AlekseyHoffman

Reputation: 2694

As you can see ESLint gave you the name of the rule vue/require-v-for-key, so you can just disable it.

In your ./eslintrc.js file, add the following rule and set it to warn or off:

{  
  ...
  rules: {
    'vue/require-v-for-key': 'warn',
  }
}

  • warn - will only show you a warning rather than throwing the error. This is preferable to off because the warnings will remind you to fix these issues before publishing your app.

  • off - will completely disable that specific rule and will not warn you about it, hence you might forget to set :key attribute everywhere which might lead to worse performance, since Vue uses keys for optimizations.

You can also install the eslint-plugin-only-warn plugin if you want to switch all rules to warnings:

{  
  ...
  plugins: [
    'only-warn'
  ],
  rules: {
    'vue/require-v-for-key': 'warn',
  }
}

Upvotes: 2

Related Questions