Почему Vue v-bind: класс не обновляется?

Question

Обновление свойства данных не обновляет динамический класс.

Попытка установки свойства данных с помощью вычисленного значения.

<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 в инструментах разработчика, класс применяется.

Answer 1

Вы вызываете метод выбора, но никогда не меняете значение данных isSelected. Правильный способ переключения значения isSelected:

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

Answer 2

Оказывается, я мигрировал из jQuery в приложение Vue.js и забыл удалить обработчик кликов, который удалял активный класс из моего элемента. Все работает как положено.