计算嵌套属性 Vuejs

Posted

技术标签:

【中文标题】计算嵌套属性 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.oldundefined,那么代码 proposal.old.name 将抛出错误。通常,这可以通过使用保护来解决,或者只是在proposal.old 有值之前不尝试访问proposal.old.name

这是一个守卫的例子。

proposal.old && proposal.old.name

【讨论】:

谢谢! :) 是的,它可以工作,但我设置 modalProposal 是错误的?我已经用设置方式编辑了我的问题! @LorenzoBerti 您设置它的方式很好。我不确定您是否需要计算出的proposal。到目前为止,您可以在模板中使用modalProposal。但在这两种情况下,你都需要守卫。 好的!谢谢!我需要计算,因为没有它,模板中的提案对象不会随着道具的变化而更新。 @LorenzoBerti 那是真的 :)

以上是关于计算嵌套属性 Vuejs的主要内容,如果未能解决你的问题,请参考以下文章

Vuejs:如何在创建的钩子中获取计算属性

VueJS 中的计算属性

Vuejs学习笔记-9.使用计算属性

vuejs 基础总结(one)

vuejs 计算属性 - 何时触发更新?

VueJS 动态获取计算属性