vue.js - 计算嵌套属性 Vuejs

Question

我对计算嵌套属性的模态组件有疑问。

我有一个父组件，它调用“模态组件”通过 Prop 传递数据。
我传递给我的组件的对象是这样的:

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

所以我将对象传递给我的组件:

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

所以我的组件模态应该具有:

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

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

modalProposal 由 v-for 中组件父级的函数设置，例如:

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

函数openModal:

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

现在我的问题是，在模板中，如果我写 proposal.name 它可以工作，但如果我写 proposal.old.name 它会返回错误

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

如何访问传递给提案的嵌套属性？

Answer 1

如果在任何时候，modalProposal.old 是未定义，则代码proposal.old.name会抛出错误。通常，这可以通过使用防护来解决，或者只是在 proposal.old 具有值之前不尝试访问 proposal.old.name。

这是一个守卫的示例。

proposal.old && proposal.old.name