我有一个名为appDetails的Vue实例。此实例属于app.html。在其中我声明了函数getApp,它返回应用程序的名称:
var appDetails = new Vue({
el: '#appDetails',
methods: {
getApp() {
var path = url;
var formData = "id=" + id;
return axios.get(path, formData)
.then((res) => {
return res.data.name;
})
}})
然后在另一个js文件中,我创建了产品实例。此js文件属于product.html。在它中,我声明了计算属性。在属性体中,我想调用appDetails Vue实例的一个函数。该属性返回的数据为app的名称。
var product = new Vue({
el: '#product',
computed : {
app_name: function() {
appDetails.getApp()
.then((returnVal) => {
return returnVal;
})
}});
在product.html中,我写道:
<a>{{app_name}}</a>
但是当我加载页面时,页面上没有文本。标记为空。
但当我试图控制日志时,它显示了一个名称。有人知道如何解决这个问题吗?
发布于 2019-06-11 05:43:49
app_name
解析为undefined
,因为该函数不返回任何内容。计算属性不能是异步的,因此您应该在组件上创建一个数据字段,并调用填充该字段的异步函数。如果您只需要获取一次数据,那么mounted
可能是一个很好的选择。
var product = new Vue({
el: '#product',
data: function () {
return {
app_name: ''
}
},
mounted: function () {
appDetails.getApp()
.then((returnVal) => {
this.app_name = returnVal;
})
}
});
另外,getApp()
依赖于AppDetails组件的状态吗?如果不是这样,那么将其作为一个独立的函数可能更有意义,因为这样会更容易将其导入到两个组件中。
https://stackoverflow.com/questions/56528501
复制相似问题