Vue.js 切换类失败

Question

我有一个项目列表 - 每个项目都有一个 isDefault 属性。 item.isDefault的初始值为false。

我有一个按钮，该按钮带有一个切换“isDefault”的方法 - 应该更改项目上的 css 类（字体很棒的类。加载了字体很棒的 css，并且该类在使用时可以工作在页面上作为静态 html)。

<div v-for="(item, index) in items">
  <button class="button" @click="toggleDefault(index)">
    <span class="icon is-small">
        <i class="fas" :class="item.isDefault ? 'fa-check' : 'fa-minus' "></i>
    </span>
    <span>is item default? {{item.isDefault}}</span>
  </button>
</div>

我的 toggleDefault 方法有效 - 我将项目索引传入，然后执行：

toggleDefault(i) {
    this.items[i].isDefault = !this.items[i].isDefault;
}

确实，我可以在开发工具和 html 中看到值从 true 变为 false，并且可以将更改记录到控制台...

但是 css 类没有改​​变。通过检查器查看，它仍然是“fa-minus”。我在其他地方使用相同的模式并且它有效？我在做傻事吗？

** 编辑 ** 添加了我的 JS - isDefault 在每个项目上定义... toggleDefault 切换值 - 但类仍然没有改变...

const app = new Vue({
    el: '#app',
    data: {
        items: [
            {
                name: 'foo',
                isDefault: false,
            },
            {
                name: 'bar',
                isDefault: false,
            }
        ],
    },
    methods: {
        toggleDefault(i) {
            this.items[i].isDefault = !this.items[i].isDefault;
        }
    }
})

Answer 1

发现问题....我正在使用 font-awesome SVG.... Font awesome 换掉了标签！标签不在那里，vue 无法在其上运行方法！

解决方案 - 将 font awesome 标签包装在 v-if 条件中......这感觉有点恶心，但它确实有效。

<button class="button" :class="item.isDefault ? 'is-primary' : 'is-white' " @click="toggleDefault(item)">
   <template  v-if="item.isDefault">
       <span class="icon is-small">
            <i class="fas fa-check"></i>
       </span>
   </template>
   <template  v-if="!item.isDefault">
       <span class="icon is-small">
             <i class="fas fa-minus"></i>
       </span>
   </template>
   <span>Set as Default</span>
</button>