Vue 3 Computed Properties

0
votes

I am trying to use a computed property to change a font awesome icon for a simple weather app using openweathermap using the conditions to change the icon. Can't figure out why it is using the else return no matter what I do.

<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>
1
vue.jscomputed-properties
what do you this.conditions in log? – Naren
Show the code where you use the component. What dod you pass to the conditions. – Mat J
Are you sure about the equal value and equal type operator ("===")? Also, can you show us your call to openweathermap and how're you parsing it? Without it, we're unable to help you. – nunop

1 Answers

1
votes

I think it happens because Vue doesn't rerender font-awesome-icon component.

Try to append new bind attr to font-awesome-icon with property key and value weatherIcon. This trick will make a force rerender the component.

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