时间戳

首页 > 解决方案 > 使用vue页面模板语法{{}}调用异步函数完成页面渲染

html - 使用vue页面模板语法{{}}调用异步函数完成页面渲染

问题描述

使用Vue页面模板语法{{}}调用异步函数完成页面渲染，可以在函数内部取值。页面显示有问题。

普通方法函数正常返回信息

  get_count(id) { 
    return id;
  },

使用异步函数方法时出现问题

  async get_count(id) { 
    return await get('/count',{"id":id});
  },

页面显示

对象承诺

我的模板语法 {{get_count}} 有问题还是需要特殊标签？

标签： htmlvue.js

解决方案

底线是：方法不是响应式的，在 Vue 中只有数据是响应式的。

您的问题可能的解决方案：

1.创建数据属性：

data() {
    return {
      count: null
    };
  }

2.创建一个方法来获取您的数据。你不需要 async/await 语法，你也需要一些工具来发出请求，比如 axios：

methods: {
    setCount() {
        axios.get('/count',{"id":id})
        .then(res => (this.count = res.data));
    }
}

3.创建一个计算属性来观察你的数据：

   getCount() {
      return this.count ? this.count : "";
    }

4.在模板中显示您的计算属性：

{{ getCount }}

推荐阅读