为什么 Vue v-bind:class 没有更新？答案

【问题标题】：Why is Vue v-bind:class not updating?为什么 Vue v-bind:class 没有更新？
【发布时间】：2019-10-17 10:19:30
【问题描述】：

更新数据属性不会更新动态类。

已尝试通过计算值设置数据属性。

<div class="customize-box" v-on:click="select" v-bind:class="{active: customizeBoxVisible}"></div>
<script>
    export default {
        data() {
            return {
                isSelected: false
            }
        },
        computed: {
            customizeBoxVisible: {
                get() {
                    return this.isSelected;
                },
                set(value) {
                    this.isSelected = value;
                }
            }
       },
       methods: {
            select() {
                this.isSelected = true;
            }
        }
   }
</script>

在 chrome 开发工具中检查组件数据显示 customizeBoxVisible 设置为 true。在开发工具中切换 isSelected 后，将应用类。

【问题讨论】：

出于好奇，v-bind:class="{ active: isSelected }" 有效吗？
是的，如果我在 vue 开发工具中将初始值设置为 true 或将其从 false 切换为 true，则会按预期应用类。
我也尝试过将 v-bind:class 更改为使用对象：<div class="customize-box" v-on:click="select" v-bind:class="{active: object.isSelected}">，将数据更新为：data() { return { object: {isSelected: false} } },，然后在选择方法中：select() { this.$set(this.object, 'isSelected', true); }
我也尝试过提交 isSelected 以通过突变存储，然后使用 getter 从计算属性返回。

标签： vue.js vuejs2

【解决方案1】：

您正在调用 select 方法，但从未更改 isSelected 数据值。切换 isSelected 值的正确方法是。

methods: {
    select() {
        this.isSelected = !this.isSelected;
    }
}

【讨论】：

您可以在方法中看到 select 正在将 this.isSelected 设置为 true。
但您只是将其设置为 true，而从未将其设置为 false，因此它永远不会切换数据值。或者连第一次点击都没有设置类？
第一次点击没有设置类
我明白了，我以为你的问题是 isSelected 切换。您在问题中输入的代码完全代表您的组件？如果是这样，您是否尝试将 div 包装在
它在

【解决方案2】：

原来我正在从 jQuery 迁移到 Vue.js 应用程序并且忘记删除从我的元素中删除活动类的单击处理程序。一切正常。

【讨论】：