Vue.如何在创建的元素中获取key属性的值

6l7fqoea  于 2023-04-12  发布在  Vue.js
关注(0)|答案(7)|浏览(426)

我正在尝试创建一个组件,并获取其:key,以便在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是空的。

dhxwm5r4

dhxwm5r41#

你不需要使用额外的属性。你可以通过

this.$vnode.key
uinbv5nw

uinbv5nw2#

在Vue 3中,你可以通过以下方式获取密钥:

import { getCurrentInstance} from "vue";

getCurrentInstance().vnode.key
pvabu6sv

pvabu6sv3#

这个答案回答了如何将密钥传递给子组件的问题。如果你只是想从子组件内部获取当前密钥,请使用投票最高的答案。
key在Vue中是一个[special attribute][1]。你必须用别的东西来称呼你的属性。
这里有一个使用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>
bq8i3lrv

bq8i3lrv4#

在Vue 3中,你可以通过以下方式获取密钥:

this.$.vnode.key
h43kikqp

h43kikqp5#

使用this.$options._parentVnode.key对我有用:

created() {
   console.log(this.$options._parentVnode.key)
}
kjthegm6

kjthegm66#

这对我很有效
Object.keys(data.value)

4uqofj5v

4uqofj5v7#

使用Vue extension for chrome,你可以看到元素树中的键:

以下是扩展的链接:https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd

相关问题