Is there a way to handle undefined object property values in VueJS interpolation by setting a default value? I am working with a computed variable called data that is initially undefined until a selectedDataId is chosen from a selectbox. As a result, Vue throws an error stating "cannot read property 'grandChild' of undefined."
By the way, I am incorporating lodash into my solution.
<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;
});
}
}
});