Vue. 생성된 요소의 "key" 특성 값을 가져오는 방법

Vue. 생성된 요소의 "key" 특성 값을 가져오는 방법

컴포넌트를 만들고 그 키를 얻으려고 합니다.요소가 생성되었지만 키를 얻을 수 없습니다.정의되어 있지 않다

<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가 비어 있었습니다.

추가 속성을 사용할 필요가 없습니다.열쇠는 다음 방법으로 얻을 수 있습니다.

this.$vnode.key

이 답변은 키를 하위 구성 요소에 전달하는 방법에 대한 질문에 대한 답변입니다.하위 구성 요소 내부에서 현재 키를 가져오려는 경우 가장 높은 투표율을 가진 답변을 사용하십시오.

---

key is a 특수 속성 in Vue. You will have to call your property something else.

또 다른 요.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>

Vue 3에서는 다음 방법으로 키를 얻을 수 있습니다.

import { getCurrentInstance} from "vue";

getCurrentInstance().vnode.key

크롬용 Vue 확장을 사용하면 요소 트리에서 다음과 같은 키를 볼 수 있습니다.

다음은 내선번호 링크입니다.https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd

이걸 이용해서.$140입니다._parentVnode.key는 다음과 같이 동작합니다.

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

언급URL : https://stackoverflow.com/questions/45852026/vue-how-to-get-a-value-of-a-key-attribute-in-created-element