道具对象的属性在刷新函数中未定义
Posted
技术标签:
【中文标题】道具对象的属性在刷新函数中未定义【英文标题】:The prop object's property is undefined in refresh function 【发布时间】:2020-03-15 18:10:27 【问题描述】:我使用 Vue.js 并且有一个组件。我将一个道具“请求”传递给该组件:
<adjustments-list
v-if="request"
:request="request"
/>
在组件中我可以做到这一点:
<text-input
:value="request.id"
/>
显示“id”的值是有效的。
在组件的 props 部分:
props:
request: Object
在组件的挂载钩子中:
async mounted ()
await this.refresh()
,
在组件的刷新功能中:
async refresh ()
console.log('this.request.id =', this.request.id)
if (this.request.id)
const data = await requestApi.getRequestResultAdjustmentByReqId(this.request.id)
,
this.request.id 未定义。
我不知道为什么。
【问题讨论】:
请求属性是从父组件传递的?我认为当子组件只是“安装”时,该属性还没有被初始化或其他什么。 是的。请求属性已从父组件传递。但是,如何让它发挥作用呢? 也许您可以为该属性添加一个“手表”并从那里开始? 【参考方案1】:如果request
属性对组件是异步可用的,那么您必须使用以下观察者的组合:
// adjustments-list component
new Vue(
props:
request: Object
,
data()
return
apiData: null
,
watch:
request(newValue, _oldValue)
this.refresh(newValue);
,
mounted: function ()
// Do something here
,
methods:
refresh (request)
if (request.id)
// Using promise instead of async-await
requestApi.getRequestResultAdjustmentByReqId(request.id)
.then(() => this.apiData = data);
);
另外,请注意,mounted
应该是一个普通的旧 JS 函数,而不是 async
函数。这就是组件的生命周期方法应该以特定方式运行。
【讨论】:
以上是关于道具对象的属性在刷新函数中未定义的主要内容,如果未能解决你的问题,请参考以下文章
VueJS <script> 模板 - 小胡子括号中未定义道具
TypeError:无法读取 Gatsby 中未定义 ....src/pages/index.js 的属性“数据”
为啥使用 redux devtools 在我的 _reduxDevtools 对象中未定义 ActionCreators 属性?