Блог

Документы vue https://v2.vuejs.org/v2/guide/list.html скажи, что я могу это сделать:

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

Но когда я это делаю, я получаю:

 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
  

Я могу обойти, сказав

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

Документы неверны? Чего мне не хватает?

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

Команда ‘npm run serve’, которая запускает ‘vue-cli-service serve’

Весь файл:

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

Как вы можете видеть, ESLint дал вам имя правила vue/require-v-for-key , поэтому вы можете просто отключить его.

В вашем ./eslintrc.js файле добавьте следующее правило и установите для него значение warn или off :

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

• warn — покажет вам только предупреждение, а не выдает ошибку. Это предпочтительнее off , потому что предупреждения будут напоминать вам об устранении этих проблем перед публикацией вашего приложения.

• off — полностью отключит это конкретное правило и не предупредит вас об этом, следовательно, вы можете забыть :key везде установить атрибут, что может привести к снижению производительности, поскольку Vue использует ключи для оптимизации.

Вы также можете установить плагин eslint-plugin-only-warn, если хотите переключить все правила на предупреждения:

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