关于vue在template标签中使用异步方法无法显示的问题

最近开发中遇到一个问题,场景如下:

        我在template标签中有两个值,这两个值已经获取到并展示在页面上了,

        目的是需要根据这两个值请求后端算出第三个值然后渲染到页面上

  代码如下:

看完这段代码问题就来了:

        正常来说如果是methods的方法是同步方法的话是可以在页面中渲染到那个值的

但是这个是一个异步方法,请求了一个接口,得到了一个promise对象 ,由于promise对象的结果在它的下一个.then才能拿到,所以造成了在页面上显示了一个promise而不是里面对应的值

而一个项目里有很多这种需要算第三个值的场景,所以想通过这种直接在模板中写方法的形式就不可取了,

        目前尝试了各种方法,唯一可行的是在data中单独定义一个变量,然后算完之后在页面上用这个变量

        但是这种场景的话需要定义多个变量,多个方法去算,不知道有没有更好的方法可以实现这种情况

猜你喜欢

转载自blog.csdn.net/weixin_48309048/article/details/128301613