正文 

当前位置： 首页 > 知识 >

vue-language-server ：迭代中的元素期望有 'v-bind:key' 指令

     2023-02-22     36

关键词：

【中文标题】vue-language-server ：迭代中的元素期望有 \'v-bind:key\' 指令【英文标题】：vue-language-server : Elements in iteration expect to have 'v-bind:key' directivesvue-language-server ：迭代中的元素期望有 'v-bind:key' 指令 【发布时间】：2018-05-16 10:39:01 【问题描述】：

Vue.js 2.5 / Visual Studio 代码编辑器

我收到了这个 es-lint 警告，我该如何摆脱它？

<template :slot="slotName" slot-scope="props" v-for="slotName in  $scopedSlots?Object.keys($scopedSlots):null">
    <slot :name="slotName" :row-data="props.rowData" :row-index="props.rowIndex" :row-field="props.rowField"></slot>
</template>

我尝试添加索引，但没有解决这个问题

<template :slot="slotName" slot-scope="props" v-for="(slotName, index) in  $scopedSlots?Object.keys($scopedSlots):null" :key="index">
    <slot :name="slotName" :row-data="props.rowData" :row-index="props.rowIndex" :row-field="props.rowField"></slot>
</template>

【问题讨论】：

可能将key 放在slot 元素上而不是template 元素上？ @Roy，感谢您的反馈...我试过了，es-lint 警告消失了，但是 git 出现编译错误：-key 在 上不起作用，因为插槽是抽象的出口并且可能扩展到多个元素。请改用包装元素上的键。 你能回答吗...我会投票给它...我可以在 包装器上添加 :key 绑定！ 【参考方案1】：

这个问题得到了很好的回答，但我想添加一个示例和文档链接：

这种结构导致上述错误：

<div v-for="(item, index) in items">
    index. item.name
</div>

您可以通过更改如下语法来修复它：

<div v-for="(item, index) in items" :key="item.id">
    index. item.name
</div>

如果您的商品没有任何唯一的 id 字段，您可以写 :key="item"。 但是，出于性能原因，您的数据应该有一个 id 字段。

https://vuejs.org/v2/guide/list.html#key

【讨论】：

使用:key="item" 解决了我输出字符串数组的问题。【参考方案2】：

您可以放心地忽略该警告。它来自 vue 的 eslint 插件，这是一个错误，got fixed a month ago 但可能 vetur 仍在使用旧版本的插件。

必须将 key 属性添加到您传递给组件的内容中

【讨论】：

感谢反馈...我可以忽略它，但我也可以在插槽中的包装元素内添加 :key 绑定 是的，你可以 :)，如果你知道如何从数据中提取 key 会更容易。但是，如果您的组件正在呈现任意数据，您别无选择，只能让组件的用户提供该信息（例如：虚拟滚动条） 谢谢..如果数据中没有键，我可以添加索引并使用它...它也运行良好 不使用索引作为键，这是没有key时的默认行为 有趣的是，我将我的 eslint-plugin-vue 升级到了 5.0.0-beta.1（修复版），它报告为错误而不是警告。【参考方案3】：

我们来看一个简单的例子！

我正在构建一个待办事项列表应用程序。所以我构建了一个名为Todo 的组件，在我的TodoList 组件中，我将像这样调用Todo 组件

    <todo v-for="todo in todos" v-bind:key="todo" v-bind:todo="todo"></todo>

希望对你有帮助！

【讨论】：

【参考方案4】：

希望这行得通。

父组件

<template>
  <ul>
    <VideoListItem v-for="video in videos" v-bind:key="video.title" v-bind:video="video"></VideoListItem>
  </ul>
</template>

<script>
import VideoListItem from "./VideoListItem";

export default 
  name: "VideoList",
  components:  VideoListItem ,
  props: ["videos"]
;
</script>

子组件

<template>
  <li> video.snippet.title</li>
</template>

<script>
export default 
  name: "VideoListItem",
  props: ["video"]
;
</script>

<style scoped>
</style>

================================================ =======

Listen => 当你提供 v-for 属性时，我们需要提供 v-key 属性。 它提高了渲染我们的项目列表的性能。

【讨论】：

请添加此代码为提高答案质量所做的说明。【参考方案5】： 
<li class="list-group-item" v-for="server in Servers" v-bind:key="server">

像这样在标签中指定唯一键。

【讨论】：

【参考方案6】：

假设您正在迭代一个名为 users 的数组，那么您可以执行以下操作：

<div v-for="(user,id) in users" :key="id" >
      <div class="card" >
       ...........................
      </div>
</div>

【讨论】：

【参考方案7】：

这对我有用

<div :class="sliderClass()" v-for="(slide,index) in slides" :key="index">
<div :class="sliderClass()" v-for="slide in slides" :key="slide.SliderID">

【讨论】：

【参考方案8】：

这是eslint-plugin-vue 中的the discussion，建议采用以下解决方法：

"vetur.validation.template": false,

对应于这个 UI 选项：

猜测 html 中没有 eslint 验证比不正确的验证要好。

【讨论】：

为啥 JavaScript 中的对象不可迭代？

】为啥JavaScript中的对象不可迭代？【英文标题】：WhyareObjectsnotIterableinJavaScript?为什么JavaScript中的对象不可迭代？【发布时间】：2020-04-0907:54:30【问题描述】：为什么对象默认不可迭代？我经常看到与迭代对象相关的问题，常见... 查看详情

python中的“迭代”详解

参考技术A迭代器模式：一种惰性获取数据项的方式，即按需一次获取一个数据项。所有序列都是可以迭代的。我们接下来要实现一个Sentence（句子）类，我们向这个类的构造方法传入包含一些文本的字符串，然后可以逐个单词迭... 查看详情

JsonOBJECT 迭代中的问题：不可能迭代一段时间

】JsonOBJECT迭代中的问题：不可能迭代一段时间【英文标题】：ProbleminIteraitonofaJsonOBJECT:Isimpossibletoiteratewithawhile【发布时间】：2021-09-1312:19:26【问题描述】：我想在JsonObjet中进行迭代。我的Json文件是：["id":2,"tagw2":"flemme","conseil2":"... 查看详情

从二叉搜索树中的 end() 迭代器递减迭代器

】从二叉搜索树中的end()迭代器递减迭代器【英文标题】：Decrementingiteratorfromend()iteratorinbinarysearchtree【发布时间】：2017-12-2618:16:54【问题描述】：在二叉搜索树中，end()成员函数应该简单地返回iterator(nullptr)，对吧？但是节点nullp... 查看详情

javascript中的数组迭代

】javascript中的数组迭代【英文标题】：Arrayiterationinjavascript【发布时间】：2018-05-1418:36:14【问题描述】：Array:3412124539:1,3412124540:1,3412124577:2,3412124590:1,3412124602:1,3412124605:1,3412124607:1,3412124617:1,3412124629:1,3412124630:1,47 查看详情

Map 在 React 中的第一次迭代后停止迭代

】Map在React中的第一次迭代后停止迭代【英文标题】：MapstopsiteratingafterfirstiterationinReact【发布时间】：2020-12-1522:50:13【问题描述】：我的组件应该在组件挂载时检索课程数据。我遇到的问题是，无论我使用课程ID还是课程标题​... 查看详情

列表理解中的双重迭代

】列表理解中的双重迭代【英文标题】：DoubleIterationinListComprehension【发布时间】：2010-11-1423:42:51【问题描述】：在Python中，您可以在列表推导中拥有多个迭代器，例如[(x,y)forxinaforyinb]对于一些合适的序列a和b。我知道Python列表推... 查看详情

如何仅使用 C++ 中的迭代器正确迭代 3D 向量？ [关闭]

】如何仅使用C++中的迭代器正确迭代3D向量？[关闭]【英文标题】：Howtoproperlyiteratea3Dvector,usingonlyiteratorsinC++?[closed]【发布时间】：2020-01-0713:57:37【问题描述】：我有以下main()程序-intmain()vector<vector<vector<int>>>vec;vector&... 查看详情

Python 3 中的迭代器

】Python3中的迭代器【英文标题】：IteratorsinPython3【发布时间】：2014-04-0413:26:09【问题描述】：在Python3中，许多返回列表的函数（现在是类）现在都返回可迭代对象，最流行的例子是range。在这种情况下，在Python3中将range设置为... 查看详情

java中的iterator迭代器详解

查看详情

如何从 xgboost 中的最佳迭代中保存模型？

】如何从xgboost中的最佳迭代中保存模型？【英文标题】：Howtosavemodelfrombestiterationinxgboost?【发布时间】：2021-02-2011:32:32【问题描述】：我正在使用XGBClassifier进行图像分类。因为我是机器学习和xgboost的新手。但最近我知道，我在... 查看详情

迭代 Firebase 中的子快照

】迭代Firebase中的子快照【英文标题】：IterateoversnapshotchildreninFirebase【发布时间】：2015-02-0503:47:17【问题描述】：我有一个包含多个对象的Firebase资源，我想使用Swift对它们进行迭代。我期望的工作如下（根据Firebase文档）https://w... 查看详情

Berkeley DB 中的函数指针迭代器

】BerkeleyDB中的函数指针迭代器【英文标题】：FunctionpointeriteratorinBerkeleyDB【发布时间】：2014-03-2622:00:25【问题描述】：我正在实现一个迭代器来遍历伯克利数据库中的记录。但是，似乎我需要在调用cursor->getwithDB_NEXT之前设置DB... 查看详情

返回引用中的迭代器

】返回引用中的迭代器【英文标题】：Returnaniteratorinreference【发布时间】：2016-11-1403:08:01【问题描述】：我正在尝试在引用中返回一个迭代器voidclass::foo(vector<bar>::iterator&iterBar)vector<bar>copy=GetVecBar();iterBar=min_element(copy.... 查看详情

如何使用 Ruby 中的特定步骤迭代反向范围？

】如何使用Ruby中的特定步骤迭代反向范围？【英文标题】：HowcanIiterateoverareversedrangewithaspecificstepinRuby?【发布时间】：2013-03-2021:06:25【问题描述】：我可以这样迭代(0..10).step(2)|v|putsv但是，由于反向范围等于空范围，我不能这样... 查看详情

迭代快速车把中的对象

】迭代快速车把中的对象【英文标题】：iteratingoverobjectsinexpress-handlebars【发布时间】：2018-06-0713:10:09【问题描述】：这是我传递给车把模板的模型module.exports=function(showHeader,userId)//thedatamodelreturnuserId:userId,seminars:userSeminars;;;varuser... 查看详情

python中的迭代器

可用于for循环的对象称为可迭代对象（Iterable），可迭代对象分为：　　1.集合数据类型：list、turple、dict、set、dir等　　2.generator，包括：生成器和生成器函数可调用next（）函数并不断返回下一值的对象称为迭代器（Iterator）生... 查看详情

什么是 php 中的对象迭代

】什么是php中的对象迭代【英文标题】：WhatisObjectiterationinphp【发布时间】：2011-07-1610:46:57【问题描述】：谁能解释什么是对象迭代以及这段代码是如何工作的？classMyIteratorimplementsIteratorprivate$var=array();publicfunction__construct($array)if... 查看详情