在Vue实例中呈现文本的问题是什么？
在Vue实例中呈现文本的问题是什么？
提问于 2019-06-10 22:37:34
我有一个名为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>但是当我加载页面时，页面上没有文本。标记为空。
但当我试图控制日志时，它显示了一个名称。有人知道如何解决这个问题吗？
回答 1
Stack Overflow用户
回答已采纳
发布于 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组件的状态吗？如果不是这样，那么将其作为一个独立的函数可能更有意义，因为这样会更容易将其导入到两个组件中。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56528501
复制相关文章
相似问题
腾讯云开发者
