Vue 通过异步方法从数据中重新渲染答案

【问题标题】：Vue rerender from data by async methodVue 通过异步方法从数据中重新渲染
【发布时间】：2021-05-19 07:46:52
【问题描述】：

我有一个图标即显示带有红色或白色心形的favorite/not favorite 状态。

html

<img :src="favoriteStatus ? '/icons/liked@3x.png' : '/icons/like@3x.png'">

我调用api获取状态

try {
  const res = await .......... ;
  if (res.cmd_data.code === 0) {
    this.favoriteStatus = res.cmd_data.msg;
    this.$forceUpdate();
  } else {
   ....
  }
} catch ......

res.cmd_data.msg 是一个布尔值。

我的 vue 开发工具显示 favoriteStatus 可以正确更改（真或假）。

但是心形图标没有改变，$forceUpdate() 也没有工作。

【问题讨论】：

用你的开发工具检查最终的 URL，URL 是什么？另外，您确定路径正确吗？首先尝试在没有任何条件的情况下显示它。那么，不妨试试这个<img :src="`url(${require('/icons/${favoriteStatus ? liked : like}@3x.png')})` 。
图片没问题，我在data里设置了true（ favoriteStatus: true ），心变成了红色。
不，只是 cmd_data: { code: 0, msg: false }
所以它应该在我的情况下呈现？
那么，你有一个元素列表吗？如果他们自己不携带favorite 状态，你怎么能期望每个项目都有一个本地状态？我们将需要更多示例来说明您在此处尝试执行的操作。你能在github或codesandbox上做一个minimal reproducible example吗？

标签： vue.js nuxt.js

【解决方案1】：

你可以试试这个表格

<img :src="`url(${require('/icons/${favoriteStatus ? liked : like}@3x.png')})`

编辑：最后，这只是一些生命周期问题。
OP 在获取 API 时通过摆弄来修复它。

【讨论】：