Vue는 사용하기 전에 소품에서 데이터를 기다립니다.

Vue는 사용하기 전에 소품에서 데이터를 기다립니다.

작성한 훅 안에서 소품 데이터를 기다리고 있는 문제가 계속 발생하고 있습니다."this.value is not defined"(프로포트에서 아직 로드되지 않았기 때문에 값이 정의되지 않았습니다) 등의 오류가 계속 발생합니다.

는 이 를 몇 했습니다.v-if필요한 경우에만 사용할 수 있습니다.다만, 작성한 소품 정보를 사용하고 싶은 경우도 있습니다.이 경우 에러가 발생하고, 작성 부분에 데이터를 「대기」하고 나서 실행하는 방법을 알 수 없습니다.

조언 좀 해주시겠어요?

--

업데이트하여 몇 가지 예제 코드를 추가합니다.

App.js 페이지에서 "userInfo"를 호출하여 데이터로 설정합니다.내가 이것을 하는 이유는 두 가지다.먼저 사용자가 로그인하고 있는지 확인하고, 두 번째는 나중에 앱 전체에서 사용되므로 사용자 정보를 저장하는 데 시간을 들입니다.(user와 userInfo는 다르며, 다른 정보가 포함되어 있습니다.)사용자는 이메일/패스워드, userInfo는 사용자 이름, bio 등)

data() {
  return {
    user: null,
    userInfo: null,
  }
},
created(){
//let user = firebase.auth().currentUser
  firebase.auth().onAuthStateChanged((user) => {
    if(user){
      this.user = user
      let ref = db.collection('users')
      .where('user_id', '==', this.user.uid)
      ref.get().then(snapshot => {
      snapshot.forEach(doc => {
        this.userInfo = doc.data()
      })
    })

    } else {
      this.user = null
    }
  })
},

이제 v-bind를 사용하여 이 정보를 에 전달합니다.그리고 소품을 이용해서 정보가 필요한 곳에 전화를 해요.

이 문제는 다음과 같은 작업을 수행할 때 발생합니다.

if(this.userInfo) {
  value = true  
}

this.userInfo를 호출하면 "this.userInfo is null" 오류가 발생합니다(기본값으로 페이지의 data()에서 null로 설정합니다).

코멘트에서 이미 언급했듯이 Promise 해결 문제가 발생하고 있습니다.Promise에그, Components Promise에 합니다.created()

를 사용하는 것을 추천합니다.v-if하위 구성 요소 자체에서 이미 수행했듯이.저는 '아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아.v-if상위 구성 요소에서 하위 구성 요소를 표시하거나 숨길 수 있습니다.할 수 것이다.created()뿐만 아니라 내에서 할 수 마크업을 하는 데도 이 됩니다.v-ifs.

그런 부모/자녀 관계가 있다고 가정해 봅시다.

<SomeParentComponent>
  <SomeChildComponent :someProp="yourProp" />
</SomeParentComponent>

yourPropPromise 은 Promise 결해해 해해 。null,undefined또는 설정해 놓은 것이라도 상관없습니다. 을 the .v-if그 표현은 로 평가된다.yourProp그냥 그래요.

<SomeParentComponent>
  <SomeChildComponent :someProp="yourProp" v-if="yourProp" />
</SomeParentComponent>                           <!-- ^-- See here -->

이렇게 하면 다음 경우에만 아이가 렌더링됩니다.yourProp설정이 되어 있기 때문에, 에러는 발생하지 않습니다.

API가 반환되면 프로펠이 문자 그대로 비어 있거나 null이 되는 엣지 케이스나 상위 컴포넌트를 제어할 수 없는 프로젝트를 진행 중인 경우가 있기 때문에 여기서 받아들여진 답변으로는 OP의 질문이 완전히 해결되지 않는다고 생각합니다.따라서 이 경우 생성된 훅에 이미 소품을 사용할 수 있는지 확인함으로써 내부적으로 이 문제를 해결할 수 있습니다.소품이 사용 가능하게 될 때까지 이 소품을 동적으로 감시해야 합니다.

// your component
export default {
  props: ['userInfo'],

  created() {
    // check if the prop userInfo available or not
    if (this.userInfo) {
      // do your thing
    } else {
      // start watching this prop
      const unwatch = this.$watch('userInfo', () => {
        if (!this.userInfo) return

        // do your thing when userInfo is available

        // tear down this watcher as you now no longer need it
        unwatch()
      })
    }
  }
}

소품은 다음 사이트에서 이용하실 수 있습니다.created훅이요. 값이 동기화된다고 가정하면요.추가 시도default불필요한 값을 제거하기 위해v-if명령어를 참조해 주세요.그러면 동기 데이터와 비동기 데이터 모두에서 문제가 해결됩니다.

{
  props: {
    length: {
      type: Number,
      default: 0,
    },
  },
}

생각할 수 있는 접근방식은 적어도2개 있어요

1. 의존관계 주입

부모/루트 대상provide컴포넌트 트리와 수신측(하위)의 데이터/개체로부터inject그들.

부모

{
  data: () => ({
    userInfo: null
  }),

  created() {
    // Populates data via Firebase 
    // Code omitted for brevity...

    this.userInfo = doc.data();
  },

  provide() {
    return Object.defineProperty({}, 'userInfo', {
      get: () => this.userInfo
    })
  }
}

아이들.

// Children
{
  inject: ['userInfo'],

  created() {
    if (this.userInfo) {
      // Do something 
    }
  },
  mounted() {
    if (this.userInfo) {
      // Do something 
    }
  },
  // Any lifecycle hooks, methods or virtually anywhere needing a reference to this object
}

2. Vuex 스토어

소품을 전달하고 가능한 비동기 문제에 대처할 필요 없이 Vuex가 대신 상태 동기화를 처리하도록 할 수 있으며 데이터 유출에 대한 걱정을 없앨 수 있습니다.null또는undefined.

가게

export default {
  state: {
    userInfo: null
  },
  mutations: {
    UPDATE_USER(state, payload) {
      state.userInfo = payload;
    }
  }
}

부모/앱.js

export default {
  created() {
    // On firebase success callback
    this.$store.commit('UPDATE_USER', doc.data());
  }
}

아이들.

import { mapState } from 'vuex';

export default {
  computed: {
    ...mapState([
      'userInfo'
    ])
  },

  created() { },
  mounted() { },
  methods() { 
    if (this.userInfo) {
      // Do something safely
    }
  },
  // Anywhere
}

언급URL : https://stackoverflow.com/questions/59857971/vue-waiting-for-data-from-props-before-using