After switching through v-if, the styles of these two icons have not changed, and they are always the first? How should I change it?

v-if
<i style="width: 14px; height: 14px;" class="far fa-star"></i>
<i style="width: 14px; height: 14px;" class="fas fa-star"></i>

 <span id="span1" v-if="isCollected===false" @click="toCollection">
                      <!--<font-awesome-icon-->
                        <!--style="width: 14px; height: 14px;"-->
                        <!--:icon="["far","star"]" />-->
                        <i style="width: 14px; height: 14px;" class="far fa-star"></i>
                      <span></span>
                    </span>
                    <span id="span2" v-if="isCollected===true" @click="toCancel">
                      <!--<font-awesome-icon-->
                        <!--style="width: 14px; height: 14px;"-->
                        <!--:icon="["fas","star"]" />-->
                        <i style="width: 14px; height: 14px;" class="fas fa-star"></i>
                      <span></span>
                    </span>

Vue.js font-awesome

Nov.29,2021

it is recommended to rearrange the next version and indent it. In addition, the Boolean value can be directly judged by v-if . The
style has not changed. First of all, you can check whether the value of class has changed. If there is a change, check whether far and fas are using the same icon. If there is no change, check whether the value of isCollected has changed. These are the basic reasons for the problem.

vue take a look at the debugging tool. What is written in the click event?

toCollection() {
    this.isCollected = false;
}
toCancel() {
    this.isCollected = true;
}

this should be no problem.
there are two other suggestions:
1. Why not use v-if else , but get two v-if ?
2. This can be implemented in a single block. A click event control (dynamic class, ternary expression)

Previous: How does react save the state life cycle to update pictures quickly?

Next: The Loop problem in async function

The font awesome male and female icons show the same. Why?
<span v-if="emr.sex && emr.sex== " style="display:inline-block; height: 20px; font-size: 14px; border: 1px solid -sharp00C9ED; color...

Javascript vue.js font-awesome

Apr.24,2021

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1e483dd-44ca6.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1e483dd-44ca6.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?