通过v-if切换之后，这两个图标样式并没有变，始终都是第一个？应该怎么改？

Question

通过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>

Answer 1

建议重新排下版，缩进一下，另外布尔值可以直接用v-if判断。
样式没有变首先可以先看一下class的值有没有变，若有改变再检查下far和fas是不是用的就是同一个图标，若没有改变检查isCollected的值有没有变化，基本问题原因就是这几个地方了。

Answer 2

vue 调试工具看下吧。点击事件里面都是怎么写的？

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

这样应该是没问题的。
另外有两点建议：
1.为什么不用v-if else ,而去弄两个v-if ?
2.这个完全能用一个块实现.... 一个点击事件控制（动态class,三元表达式）