javascript - 在Vue实例中渲染文本的问题？

Question

我有一个名为 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>

但是当我加载页面时，没有文本。标签为空。

但是当我尝试控制台日志时，它显示了一个名字。有人知道如何解决这个问题吗？

Answer 1

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 组件的状态？如果没有，将其保留为独立函数可能是有意义的，因为将其导入到两个组件中会更容易。