Vue 3 计算属性

如何解决Vue 3 计算属性

我正在尝试使用计算属性更改简单天气应用程序的字体真棒图标，使用 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>

解决方法

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

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

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