VueJ에서 [_ob__: Observer] 요소에 액세스하는 방법

VueJ에서 [_ob__: Observer] 요소에 액세스하는 방법

나는 VueJs에 꽤 익숙하지 않다.부모 컴포넌트가 있어 데이터가 자녀와 손자에게 전달됩니다.

My Child 컴포넌트는 다음과 같습니다.

B.

import C from './c.vue'

export default{

    props:['info'],

    components:{
        'c': C
    },
    
    created: function(){
      this.getInfo();
    },

    methods: {
        getInfo: function(){
            console.log("Printing inside get method", this.info);
        }
    }
}

<template>
  <div>
    <c :info="info"></c>
  </div>
</template>

콘솔을 보면 다음과 같은 어레이가 인쇄되어 있습니다.

이와 같이 어레이의 요소 info[0]에 액세스하려고 하면 콘솔에 정의되지 않은 것으로 표시됩니다.어레이 요소에 액세스할 수 없습니다.누가 나 좀 도와줄래?감사합니다!

<template>
  <div>
    <c :info="info"></c>
  </div>
</template>

그:info="info"외부 컴포넌트를 통과시킵니다.info로의 재산c요소.외부 구성요소에 속성이 없는 경우info그 결과,undefined지금 바로 보실 수 있습니다(댓글에 따르면).

단순히 동작을 테스트하고 싶을 뿐이고, 당신의 목표는 스트링을 전달하는 것이었다.info컴포넌트에 추가c스트링으로 전달할 수 있습니다.

<template>
  <div>
    <c :info="'info'"></c>
  </div>
</template>

또는 이 없는 경우::

<template>
  <div>
    <c info="info"></c>
  </div>
</template>

왜요? 왜냐하면:의 줄임말이다v-bind:javascript 객체를 찾고 이후:info="info"와 동등하다:info=info넌 정말 같이 가고 싶어:info="'info'"이는 다음과 같기 때문입니다.info='info'.

자세한 내용은 Vue.js의 Propos Doc 섹션을 참조하십시오.https://vuejs.org/v2/guide/components-props.html

이 경우,info외부 컴포넌트에 속성이 설정되어 있습니다.방법을 알려주시면 더 도와드리겠습니다.

이 경우this.info는 입니다.:Observer왜냐하면 당신은 그것이 실현되기 전에 소품을 위로하고 있기 때문이다.이 경우, 만약 당신이 전화를 한다면this.getInfo()에서mounted()대신 구명 훅created()소품 자체를 얻을 수 있습니다(예:mounted()옵저버가 아니라 소품들은 이미 통과했다.

그렇기 때문에 콘솔 내의 오브젝트는 다음과 같이 표시됩니다.:Observer그것에 매개 변수 형식과 콘텐츠지는 않았을 것이다.this.info[0]그것이 기다리고 있는 것을 소품들이 통과될 것.

여기 한 위협 더 광범위한 그것에 대해:뷰 JS가 물건을 배열 대신 데이터[__ob__:옵저버]말을 찾을 수 있다.

하나의 방법으로 문제 및 팁을 추가하는https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?hl=en.에서 발견될 수 있는 크롬 확장 Vue.js DevTools 사용하여는 것이다그 내선 번호 여러분께서는 당신의 각각의 구성 요소에 전달을 냈고 그 정보를 가지고 어디 부모, 아이의 사슬을 잃어버리는 거죠 당신의 소품 grand-child을 결정할 수 있어야 한다 허용할 것이다.

여기서 해결책을 찾았습니다.

https://forum.vuejs.org/t/how-to-access-the-elements-of---ob---observer-in-vuejs/22404/5

하위 구성요소는 공리가 완료될 때까지 "대기"하지 않으므로 처음에는 정보를 위한 빈 배열로 렌더링됩니다.

하위 구성 요소를 렌더링하기 전에 데이터가 표시될 때까지 기다리려면 상위 템플릿의 하위 구성 요소에서 v-if="info.length > 0"을 사용하십시오.

이제 작동하게 되었습니다. 제가 찾은 솔루션을 공유하고 싶었습니다.

있는 create 거예요 이쯤에서 게 것 같아요.mounted.

것은 '아까운 이야기' 입니다.info브라우저 콘솔의 출력이 업데이트되기 때문에 콘솔에 표시됩니다.에서, 「」의 할 수 있습니다.info과 같이 JSON 합니다.JSON.stringify(this.info)

경우,info는, 됩니다.mounted하위 구성 요소가 마운트되기 전에 데이터가 준비되지 않은 경우에도 오류가 발생합니다.

info조건 렌더링을 위한 최선의 방법이라고 생각합니다.

<c v-if="info" :info="info"></c>

아니면 그렇게 잠든다는 거죠. 경우 컴포넌트 이 경우 .info정의되어 있지 않고, 그 외의 컨텐츠를 사용할 수 있는 타이밍에 렌더링 합니다.

언급URL : https://stackoverflow.com/questions/47503796/how-to-access-the-elements-of-ob-observer-in-vuejs