如何从 Vuejs 中的 HTML 访问 promise 结果

Question

我正在为一个大学项目使用 Vuejs 做一个网站。
该功能的范围是找出一本书是否被设置为收藏，然后返回图标的名称，以便自动设置正确的图标。
为此，我创建了函数setIcon()：

setIcon: async function (id) {
    var favs = await DataService.getFav();
    var isFav = favs.find((book) => book.id === id);
    if (isFav === undefined) {
       return "favorite_border";
    } 
    else
    {
       return "favorite";
    }
}

然后，只需在图标标记内的 HTML 部分中调用该函数。
出于调试的原因，我去掉了图标标签，只留下了一个按钮，所以我可以看到函数的返回值是什么作为按钮的名称。

 <md-button class="md-button" @click.stop="setFav(book.id)">
       {{ setIcon(book.id) }}
 </md-button>

问题在于函数返回的值是Promise Object，而不是字符串"favorite_border" 或"favorite"。

所以我的问题是如何在 HTML 部分访问承诺的结果？

我也尝试将.then() 部分放在setIcon() 之后，但结果是一样的

Answer 1

你不必使用async，试试这个：

setIcon: function(id) {
    DataService.getFav().then((favs) = >{
        var isFav = favs.find((book) = >book.id === id);
        if (isFav === undefined) {
            return "favorite_border";
        } else {
            return "favorite";
        }
    })
}

如果DataService.getFav()方法没有参数并且得到相同的结果，你应该将结果缓存在另一个方法中，否则每次执行setIcon都会调用DataService.getFav()，这是对性能的浪费。