Вычисленные свойства Vue 3

Я пытаюсь использовать вычисленное свойство, чтобы изменить значок шрифта awesome для простого погодного приложения, используя 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>

person Meyer744    schedule 31.01.2021    source источник
comment
что ты this.conditions в журнале?   -  person Naren    schedule 31.01.2021
comment
Покажите код, в котором вы используете компонент. Что вы переходите к условиям.   -  person Mat J    schedule 31.01.2021
comment
Вы уверены в использовании оператора равного значения и типа (===)? Кроме того, не могли бы вы показать нам свой призыв к openweathermap и как вы его разбираете? Без него мы не сможем вам помочь.   -  person nunop    schedule 31.01.2021


Ответы (1)


Я думаю, это происходит потому, что Vue не выполняет рендеринг font-awesome-icon компонента.

Попробуйте добавить новый атрибут привязки к font-awesome-icon со свойством key и значением weatherIcon. Этот трюк заставит повторно визуализировать компонент.

<font-awesome-icon
  :key="weatherIcon"
  class="icon-weather"
  :icon="weatherIcon"
/>
person BrooonS    schedule 31.01.2021
comment
Это сработало отлично! Спасибо. - person Meyer744; 01.02.2021