Vue 2 : null 속성 ID를 읽을 수 없습니다.

Vue 2 : null 속성 ID를 읽을 수 없습니다.

주문 목록을 가지고 있는데, 각 주문을 클릭하면 주문 세부 정보를 볼 수 있습니다.

디버깅을 몇 시간 동안 사용하여 랜딩 페이지에서 id 속성이 null이지만 스토어와 api 호출 함수를 통해 정상으로 보이는 이유를 이해했습니다.

이를 설명하는 가장 좋은 방법은 코드를 사용하는 것이므로 살펴보십시오(ID에 유효한 값이 남아 있는 주석 참조).

-> 작업 경로

 { path: '/vieworder/:id', component: ViewOrder, props: true },

-> Route Push to Details 페이지:

methods: {
        ...mapActions(['getOrders']),
        init() {
            this.getOrders()
        },
        viewOrder: function(order){
            this.$router.push('/vieworder/' + order.id)
        }
    },

-> VIEWORDER.VUE(템플릿에서 ID는 NULL입니다.)

    import * as types from '../store/mutationtypes'
    import { mapGetters, mapActions } from 'vuex'

    export default {
        name: 'ViewOrder',
        props: {
            id: {
                type: String,
                required: true
            }
        },
        created() {
            this.$store.dispatch('getOrderById', {
                id: this.id
            })
            console.log('The id is now : ' + this.id)
        },
        computed: {
            ...mapGetters(["order"])
        }
    }

<template>
    <div class="col-sm-10 col-sm-offset-1">
        <h4>{{ order.id }}</h4>
    </div>
</template>

--> Store and GetOrderBYID (ID 값은 여기서 올바른 값입니다...)

export default new Vuex.Store({ 
state: {
    orders: [],
    order: null
},
getters: {
    orders: state => state.orders,
    order: state => state.order
},
actions: {
    getOrders({ commit }) {
        api.getOrders().then(orders => commit(types.UPDATE_ORDERS, orders))
    },
    getOrderById({ commit }, { id }){
        console.log("In Store now - Do we have an id ? : " + id)
        api.getOrderById(id).then(order => commit(types.UPDATE_ORDER, order))
    }, 
    etc.etc.etc...

--> API 콜 데이터 반환

getOrderById(orderId){
    return axios.get('http://localhost:3000/Orders/' + orderId)
 .then(response => response.data)   
},

--> API 호출에서 반환되는 데이터 예시

"Orders": [
{
  "id": 123456,
  "PaidDate": "2017-01-12",
  "AppId": "KLM-UXI-NIX-FIX",
  "TicketType": "Barn - Enkeltbillett",
  "TicketCount": 1,
  "OrderSum": "17",
  "MediaChannel": "Android",
  "StatusCode": "08-12-34-56-78",
  "PaymentOption": "VISA"
},

--> 에러

이것은 OP의 구체적인 상황에 대한 답변이 아니라 질문의 제목에 대한 답변입니다.vuejs "Cannot read property id of null" 또는 "Cannot read property id of defined"에서 동일한 콘솔 오류 메시지가 표시되었습니다.

결국 모든 코드를 검토하고 "x.id"의 모든 사용이 "if (x)"와 같은 블록 안에 있는지 확인함으로써 문제를 해결했습니다.예를 들어 vue 구성 요소의 "props"에 "x"가 설정되어 있으면 "정의되지 않은 속성 ID를 읽을 수 없음"과 함께 다음이 실패할 수 있습니다.

<div v-for="y in x" :key="y.id">
  {{ y.name }}
</div>

해결방법은 그것을 포장하는 것이었다.v-if블록은 다음과 같습니다.

<div v-if="x">
  <div v-for="y in x" :key="y.id">
    {{ y.name }}
  </div>
</div>

마찬가지로 계산된 속성에서는 다음이 실패할 수 있습니다.

computed: {
  sumids: function () {
    var finalsum = 0
    for (var y of this.x) {
      finalsum += y.id
    }
    return finalsum
  }
},

해결방법은 그것을 포장하는 것이었다.if블록은 다음과 같습니다.

computed: {
  sumids: function () {
    var finalsum = 0
    if (this.x) {
      for (var y of this.x) {
        finalsum += y.id
      }
    }
    return finalsum
  }
},

변화를 시도할 수 있습니다.getOrderById({ commit }, { id })로.getOrderById({ commit }, id)vuex에서 라고 부릅니다.this.$store.dispatch('getOrderById', id)에mounted()훅(주문이 비어 있는 경우)

또한 이렇게 주문이 존재하는지 확인할 수 있습니다.<div class="col-sm-10 col-sm-offset-1" v-if="order.id">데이터를 가져오기 전에 오류를 방지할 수 있습니다.

언급URL : https://stackoverflow.com/questions/43470769/vue-2-cannot-read-property-id-of-null