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