Vue.js 为什么Vue v-bind:类没有更新？

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

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

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

导出默认值{
数据（）{
返回{
结果：错
}
},
计算：{
可定制：{
得到（）{
返回此项。已选择；
},
设置（值）{
this.isSelected=值；
}
}
},
方法：{
选择（）{
this.isSelected=true；
}
}
}

---

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

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

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

---

原来我是从jQuery迁移到Vue.js应用程序的，忘记删除一个click处理程序，该处理程序从元素中删除了活动类。一切正常。

出于好奇，

v-bind:class=“{active:isSelected}”

是否正常工作？是的，如果我在vue开发工具中将初始值设置为true或将其从false切换为true，类将按预期应用。我还尝试将v-bind:class更改为使用对象：

，将数据更新为：

数据（）{return{object:{isSelected:false}}，

然后在select方法中：

select（）{this.$set（this.object，'isSelected'，true）；}

我还尝试通过变异将isSelected提交到存储，然后使用getter从计算属性返回。您可以在方法中看到，select正在将this.isSelected设置为true。但您只将其设置为true，而从不将其设置为false，因此它永远不会切换数据值。甚至第一次单击也不会设置类？T第一次单击没有设置classI see，我以为您的问题是选择切换。您在问题中输入的代码完全代表您的组件？如果是，您是否尝试将div包装到标记中？Vue组件要求此标记为组件根。可能会导致一些随机问题，但无论如何都会显示错误y、 奇怪的是，vue开发工具[link]中的值正在更新，如果我单击开发工具中的复选标记将其设置为false，然后返回true，则会应用该类。