Vue 3 计算属性答案

【问题标题】：Vue 3 Computed PropertiesVue 3 计算属性
【发布时间】：2021-05-04 22:53:54
【问题描述】：

我正在尝试使用计算属性来更改使用 openweathermap 的简单天气应用程序的字体真棒图标，并使用条件更改图标。无论我做什么，都无法弄清楚为什么它使用 else 返回。

<template>
  <h2>{{ city }}</h2>
  <p>{{ temp }} F°</p>
  <p>{{ conditions }}</p>
  <font-awesome-icon class="icon-weather" :icon="weatherIcon" />
</template>

<script>
export default {
  props: ["city", "temp", "conditions"],
  computed: {
    weatherIcon() {
      let conditions = this.conditions;
      if (conditions === "snow") {
        return "snowflake";
      } else if (conditions === "light snow") {
        return "snowflake";
      } else {
        return "cloud";
      }
    },
  },
};
</script>

<style scoped>
.icon-weather {
  font-size: 50px;
}
</style>

【问题讨论】：

你在日志中this.conditions 做什么？
在你使用组件的地方显示代码。你传递了什么条件。
您确定相等值和相等类型运算符（“===”）吗？另外，您能否向我们展示您对 openweathermap 的调用以及如何解析它？没有它，我们将无法为您提供帮助。

标签： vue.js computed-properties

【解决方案1】：

我认为这是因为 Vue 没有重新渲染 font-awesome-icon 组件。

尝试使用属性key 和值weatherIcon 将新的绑定属性附加到font-awesome-icon。这个技巧将强制重新渲染组件。

<font-awesome-icon
  :key="weatherIcon"
  class="icon-weather"
  :icon="weatherIcon"
/>

【讨论】：