Vue。如何在创建的元素中获取“键”属性的值
Posted
技术标签:
【中文标题】Vue。如何在创建的元素中获取“键”属性的值【英文标题】:Vue. How to get a value of a "key" attribute in created element 【发布时间】:2018-02-01 18:29:00 【问题描述】:我尝试创建一个组件并获取其在 axios 中使用的密钥。 元素已创建,但我无法获得密钥。未定义
<div class="container" id="root">
<paddock is="paddock-item" v-for="paddock in paddocks" :key="paddock.key" class="paddock">
</paddock>
</div>
<script>
var pItem =
props: ['key'],
template: '<div :test="key"></div>',
created: function()
console.log(key);
;
new Vue(
el: '#root',
components:
'paddock-item': pItem
,
data:
paddocks: [
key: 1,
key: 2,
key: 3,
key: 4
]
)
</script>
我尝试了一些变体,但没有结果 - @key 为空。
【问题讨论】:
【参考方案1】:您不需要使用额外的属性。您可以通过
this.$vnode.key
【讨论】:
谢谢。这只是作为答案发布有多方便。 这在 Vue3 中有改变吗?当我尝试访问this.$vnode.key
时,我得到“未定义”。将相同的值传递给id
的道具,我知道该值不是“未定义”,因为我确实得到了我的item.id
值。【参考方案2】:
此答案回答了如何将密钥传递给子组件的问题。如果您只想从子组件内部获取当前密钥,请使用投票最高的答案。
key
是 Vue 中的 special attribute。您将不得不将您的财产称为其他名称。
这里是使用pkey
的替代方法。
console.clear()
var pItem =
props: ['pkey'],
template: '<div :test="pkey"></div>',
created: function()
console.log(this.pkey);
;
new Vue(
el: '#root',
components:
'paddock-item': pItem
,
data:
paddocks: [
key: 1
,
key: 2
,
key: 3
,
key: 4
]
)
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js"></script>
<div class="container" id="root">
<paddock-item v-for="paddock in paddocks" :pkey="paddock.key" :key="paddock.key" class="paddock">
</paddock-item>
</div>
【讨论】:
通过这样做,您每次使用v-for
指令时都有效地在 2 个 props 中复制相同的值。你如何简化这一点,这样我就不会在每次使用v-for
指令时都写:key="item.id" :id="item.id"
?我不能把key
作为道具,恕我直言,这是最简单和最合乎逻辑的答案。那么如何消除这种冗余。肯定有办法......(在你说使用this.$vnode.key
之前,我认为它在Vue3中不起作用,因为它不适合我。我得到undefined
的值。【参考方案3】:
在 Vue 3 中,您可以通过以下方式获取密钥:
import getCurrentInstance from "vue";
getCurrentInstance().vnode.key
【讨论】:
【参考方案4】:使用 Chrome 的 Vue 扩展,您可以在元素树中看到键:
这是扩展的链接: https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd
【讨论】:
【参考方案5】:使用 this.$options._parentVnode.key 为我工作:
created()
console.log(this.$options._parentVnode.key)
【讨论】:
以上是关于Vue。如何在创建的元素中获取“键”属性的值的主要内容,如果未能解决你的问题,请参考以下文章