Question

我有一个v-for的客户组件，如下所示：

<my-component
  v-for="(item,index) in filteredList"
  :key="item.Rd"
  :item="item"
>

我的组件内部

<template>
    <div 
        @click="findSomething($event)"
    >
    ...HTML
    </div>
</template>

我尝试了很多方法将关键道具传递到my-comonent中，但所有方法都无效如果我设计的props:['key']出现错误 "key" is a reserved attribute and cannot be used as component prop.然后我仍然找不到钥匙我依靠的是键的值，它可以确定事件中触发了哪个项目

Answer 1

您收到的错误是不言自明的。您无法在道具中将其指定为key，因为这是Vue保留的。

有2种解决方法，在此答案中都有详细介绍：Vue. How to get a value of a "key" attribute in created element

第一种方法是简单地重命名您要传入的道具，以上文章中的用户使用pkey而不是key

第二种解决方案是在组件内部使用this.$vnode.key来访问您正在使用的密钥。

Answer 2

您实际上是在解释问题，您不能将道具命名为“钥匙”，而是用其他名字命名？

但是，在您的示例中，您还将整个项目作为道具传递，因此您可以从那里获取密钥。

Answer 3

“key”是一个保留属性，不能用作组件属性。

尝试像这样使用它。

Vue.component('mycomponent', props:['keyval'], template:myform)

将 :keyval='indx' 作为组件属性传递。

只需在组件内部使用的任何方法中使用 this 来获取此 prop。

methods:{onformchange():{console.log(this.keyval)}}

如何获取组件事件中的v-for键？

3 个答案: