计算嵌套属性 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.old
是 undefined
,那么代码 proposal.old.name
将抛出错误。通常,这可以通过使用保护来解决,或者只是在proposal.old
有值之前不尝试访问proposal.old.name
。
这是一个守卫的例子。
proposal.old && proposal.old.name
【讨论】:
谢谢! :) 是的,它可以工作,但我设置 modalProposal 是错误的?我已经用设置方式编辑了我的问题! @LorenzoBerti 您设置它的方式很好。我不确定您是否需要计算出的proposal
。到目前为止,您可以在模板中使用modalProposal
。但在这两种情况下,你都需要守卫。
好的!谢谢!我需要计算,因为没有它,模板中的提案对象不会随着道具的变化而更新。
@LorenzoBerti 那是真的 :)以上是关于计算嵌套属性 Vuejs的主要内容,如果未能解决你的问题,请参考以下文章