CODEWITHSUNDEEP
vue.jsvue-component
LorenzoBerti
LorenzoBerti

Reputation: 6974

computed nested property Vuejs

I have a problem with a modal component for computed nested property.

I have a parent component that calls "Modal component" passing data by props.
The object that I pass to my compoments is Like this:

modalProposal:{
  name:test,
  old: { name: oldTest }
}

So i pass my object to my components:

<modal :modal-proposal="modalProposal"></modal>

So my component modal should have:

export default {
        props:["modalProposal"],
        data() {
            return {
            }

        },
        computed:{
            proposal(){
                return this.modalProposal;
            }
        }
    }

modalProposal is setted by function from component parent in v-for like:

<button class="btn btn-primary" id="show-modal" v-on:click="openModal(proposal)">see proposal</button>

function openModal:

openModal(proposal){
                this.modalProposal = proposal;
                $('#proposalModal').modal('show');
            }

Now my problem is that, In template, If i write proposal.name It works but if I write proposal.old.name It returns error

"TypeError: Cannot read property 'name' of undefined"

How can I access to a nested property passed to proposal?

Upvotes: 2

Views: 5433

Answers (1)

Bert
Bert

Reputation: 82489

If, at any time, modalProposal.old is undefined then the code proposal.old.name will throw an error. Typically this is resolved by using a guard, or just not attempting to access proposal.old.name until proposal.old has a value.

Here is an example of a guard.

proposal.old && proposal.old.name

Upvotes: 3

Related Questions