迭代中的元素期望有'v-bind：key'指令。eslint-plugin-vue？答案

【问题标题】：Elements in iteration expect to have 'v-bind:key' directives.eslint-plugin-vue?迭代中的元素期望有'v-bind：key'指令。eslint-plugin-vue？
【发布时间】：2021-06-22 07:24:37
【问题描述】：

import Vue from 'vue';
export default {
    data() {
        return {
          cities : [
            'Bangalore','Chennai','Cochin','Delhi','Kolkata','Mumbai'
        ],

        value: '',
            open: false,
            current: 0
        }
    },
    props: {
        suggestions: {
            type: Array,
            required: true
        },
        selection: {
            type: String,
            required: true,
            twoWay: true
        }
    },
    computed: {
        matches() {
            return this.suggestions.filter((str) => {
                return str.indexOf(this.selection) >= 0;
            });
        },
        openSuggestion() {
            return this.selection !== "" &&
                   this.matches.length != 0 &&
                   this.open === true;
        }
    },
    methods: {
        enter() {
            this.selection = this.matches[this.current];
            this.open = false;
        },
        up() {
            if(this.current > 0)
                this.current--;
        },
        down() {
            if(this.current < this.matches.length - 1)
                this.current++;
        },
        isActive(index) {
            return index === this.current;
        },
        change() {
            if (this.open == false) {
                this.open = true;
                this.current = 0;
            }
        },
        suggestionClick(index) {
            this.selection = this.matches[index];
            this.open = false;
        },
    }
}

<template>
<div style="position:relative" v-bind:class="{'open':openSuggestion}">
    <input class="form-control" type="text" v-model="selection"
        @keydown.enter = 'enter'
        @keydown.down = 'down'
        @keydown.up = 'up'
        @input = 'change'
    />
    <ul class="dropdown-menu" style="width:100%">
        <li 
            v-for="suggestion in matches"
            v-bind:class="{'active': isActive($index)}"
            @click="suggestionClick($index)"
        >
            <a href="#">{{ suggestion }}</a>
        </li>
    </ul>
</div>
</template>

获取 eslint 错误 [vue/require-v-for-key] 迭代中的元素期望有 'v-bind:key' directives.eslint-plugin-vue。

更改后尝试更改为 v-bind:key="suggestion.id"，eslint 错误未显示但问题是自动完成未显示（完全不起作用）。

如果代码中有任何错误，谁能纠正我。

【问题讨论】：

suggestions 和 selection 的数据如何？
@RiyazKhan，过滤数据和选择的建议是为了匹配内容和检查
您能否分享与这两个属性完全匹配的示例数据
钦奈和科钦
返回 { 城市 : [........] }

标签： javascript vue.js

【解决方案1】：

当使用v-for 时，Vue 想知道如何识别列表中的项目。您不必这样做，但它被认为是最佳实践，因此 eslint 对其进行了标记。

为了给出提示，您向呈现的列表项添加一个具有唯一值（id、一些文本等）的 key 属性，如下所示：

<li 
  v-for="suggestion in matches"
  v-bind:key="suggestion.id"
>

v-bind:key 或 :key 简而言之。该值必须是number | string | boolean | symbol 类型。

有关更多信息，请参阅文档：https://vuejs.org/v2/guide/list.html#Maintaining-State

【讨论】：

我尝试将值更改为 v-bind:key="suggestion.id"，但问题是自动完成栏不起作用

【解决方案2】：

由于您已经添加了v-bind:key，现在在您的代码中，我认为问题出在$index，删除它并使用建议的索引。

这是更新后的代码，替换下拉菜单并检查：

<ul class="dropdown-menu" style="width:100%">
        <li 
            v-for="(suggestion, index) in matches"
            v-bind:key="suggestion.id"
            v-bind:class="{'active': isActive(index)}"
            @click="suggestionClick(index)"
        >
            <a href="#">{{ suggestion }}</a>
        </li>
    </ul>

【讨论】：

我换了还是一样，可能是js文件的错误？