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实例的函数。该属性返回的数据是应用程序的名称。

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

在Vue实例中渲染文本有问题吗？

1 个答案: