计算嵌套属性 Vuejs

Posted 2023-02-23

【中文标题】计算嵌套属性 Vuejs

【英文标题】：computed nested property Vuejs

【发布时间】：2018-01-02 00:33:11

【问题描述】：

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

我有一个父组件调用“模态组件”通过道具传递数据。 我传递给我的组件的对象是这样的：

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: 无法读取未定义的属性‘名称’”

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

【问题讨论】：

modalProposal 是异步设置的吗？

谢谢我已经用 set modalProposal 编辑了我的帖子

【参考方案1】：

如果，在任何时候，modalProposal.old 是 undefined，那么代码 proposal.old.name 将抛出错误。通常，这可以通过使用保护来解决，或者只是在proposal.old 有值之前不尝试访问proposal.old.name。

这是一个守卫的例子。

proposal.old && proposal.old.name

【讨论】：

谢谢！ :) 是的，它可以工作，但我设置 modalProposal 是错误的？我已经用设置方式编辑了我的问题！

@LorenzoBerti 您设置它的方式很好。我不确定您是否需要计算出的proposal。到目前为止，您可以在模板中使用modalProposal。但在这两种情况下，你都需要守卫。

好的！谢谢！我需要计算，因为没有它，模板中的提案对象不会随着道具的变化而更新。

@LorenzoBerti 那是真的 :)