VueJS 보간에서 정의되지 않은 개체 속성에 기본값을 사용하는 방법은 무엇입니까?

Question

VueJS 보간에서 정의되지 않은 개체 속성에 기본값을 사용하는 방법은 무엇입니까? 내 data은 계산 된 변수이며 선택 상자에서 selectedDataId을 선택하기 전에 처음에 정의되지 않았습니다. 따라서 vue는 을 보냅니다. "정의되지 않은 grandChild '속성을 읽을 수 없습니다. 오류가 발생했습니다.

P.S : 내가

<div> 
    {{ selectedData.child.grandChild }} 
</div> 

new Vue({ 
    data: { 
     selectedDataId: null, 
     selectedData: {}, 
     data: [ //array of objects here ] 
    }, 
    computed: { 
     selectedData() { 
      return _.find(this.data, (d) => { 
       return d.id == this.selectedDataId; 
      }); 
     } 
    } 
}); 

Answer 1

는 다음과 같은 패턴을 사용할 수 있습니다.

Answer 2

가 두 번 selectedData를 선언하는이

selectedData() { 
    return _.chain(this.data) 
     .find({id: this.selectedDataId}) 
     .defaults(...default object...) 
     .value() 
} 

Answer 3

을 시도 lodash 사용하고, 당신은 데이터 개체에서 제거해야합니다. v-if="selectedItem" 또는 방법 : 뷰는 필터 방식이 내장되어로서 당신은 정말 여기 lodash 필요가 없습니다 if (selectedItem)

: 그것은 당신이 당신의 템플릿 내에서이 테스트 할 수 정의되지 않은되고의 문제에 관해서는

selectedItem.length은 0 그런 다음 위의 테스트 그들을 truthy 것 빈 객체를 전달, 작동의 경우

selectedData() { 
    const selectedItem = this.data.filter((item) => { 
     return item.id == this.selectedDataId 
    }) 

    return selectedItem.length ? selectedItem[0] : {} // i'd set null here on fail 
} 

오히려 기본 객체보다 나는 아마 null 위를 설정합니다. 이 falsy 경우

{{ selectedData.child && selectedData.child.grandChild || 'default value' }} 

안전하게 grandChild 및 인쇄 "기본값"확인합니다 :