Vue.js Vue v-if即使满足条件也不工作（字体图标不更新）

在VueJS中，我有一个表，其中包含可以排序的列。一次只能对一列进行排序

排序前，按钮为

fa sort

。排序后，如果再次单击，按钮将变为向上

fa箭头

，然后变为向下

fa箭头

当我在导入Vue库脚本的项目中创建原型时，v-if工作正常。但在迁移到Vue CLI后，这将不起作用

现在，如果单击“排序”按钮，将应用排序，但按钮图标不变。但是，如果我进入Vue工具并更改其中的

colBeingSorted

值，则按钮图标会更新

我已经尝试了很多事情：我将条件（或其变体）移动到一个计算程序中，然后移动到一个方法中。我还打印并记录了数据，以确认它是我所期望的。在所有情况下，我都可以确认满足条件，但由于某些原因，图标不会更新

有什么想法吗？建议

我已经大大减少了代码示例，因此它不显示排序功能，只显示按钮图标格式<代码>分拣数据分拣在正常工作的分拣功能中更新：

{{column}}
...

data（）{
返回{
colBeingSorted:-1，
}
}

我不清楚代码片段中发生这种情况的确切原因，但我经常发现，如果您尝试保留相同的组件并更改道具，而不是让if-else与同一组件的不同实例一起使用，效果会更好。一种方法是只使用一个按钮组件：

<button-component
  :icon="getIcon(prop)"
  @click="handleClick(prop)"
/>

---

顺便说一句，我不认为在这里仅指数组中项目的索引时使用了“prop”。在Vue中，当道具具有非常特殊的含义时，尤其令人困惑！在这种情况下，我只使用columnIndex。

我不确定代码片段中发生这种情况的确切原因，但我经常发现，如果您尝试保留相同的组件并更改道具，而不是让if-else与同一组件的不同实例一起使用，效果会更好。一种方法是只使用一个按钮组件：

<button-component
  :icon="getIcon(prop)"
  @click="handleClick(prop)"
/>

---

顺便说一句，我不认为在这里仅指数组中项目的索引时使用了“prop”。在Vue中，当道具具有非常特殊的含义时，尤其令人困惑！在这种情况下，我只使用columnIndex。

谢谢@Maylor，我实现了您的更改，尽管它本身并没有解决问题，但它确实使我的代码更干净，更易于调试

经过进一步调查，我发现问题不在我的Vue代码中，而是与字体有关。在引擎盖下，我的

按钮组件

使用了字体Awesome，即使值已更改，也不会重新呈现图标

---

接下来，我删除了

fontawesome/js/all.js

，现在只使用

fontawesome/css/all.css

。这就解决了问题。

谢谢@Maylor，我实现了您的更改，虽然它本身并没有解决问题，但它确实使我的代码更干净，更易于调试

经过进一步调查，我发现问题不在我的Vue代码中，而是与字体有关。在引擎盖下，我的

按钮组件

使用了字体Awesome，即使值已更改，也不会重新呈现图标

---

接下来，我删除了

fontawesome/js/all.js

，现在只使用

fontawesome/css/all.css

。这就解决了问题。

听起来不错-祝你的项目好运听起来不错-祝你的项目好运