Не меняются классы div-ов (Vue.js)

Question

Изучаю Vue.js В данных компонента - список булевых значений isOne, определяющих класс div-ов (2 класса - .one и .two, отличающихся цветом рамки), формируемых через v-for.

При клике на i-й div функция изменяет isOne[i], но класс при этом не меняется - все остается как при загрузке странице, в чем я неправ, коллеги?

<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
    .one {border: 1px solid red; width: 100px; padding: 10px; margin: 10px;}
    .two {border: 1px solid green; width: 100px; padding: 10px; margin: 10px;}
</style>
</head>
<body>

<div id="app">
   <div v-for="(is1, i) in isOne"
        v-bind:class="getClass(i)"
        v-on:click="changeColor(i)">HELLO, VUE #{{ i }}</div>
</div>

<script>

let vm = new Vue({ 
    el: '#app',
    data: {
        isOne: [true, false, true],
    },
    methods: {
        changeColor: function(i) {
            this.isOne[i] = !this.isOne[i];
            console.log(this.isOne);
        },
        getClass: function(i) {
            return this.isOne[i] ? 'one' : 'two';
        }
    },
})
</script>
</body>
</html>

Answer 1

Загляните в руководство по VueJs, там есть про то, какие изменения не умеет отслеживать Vue и как это бойти, в том числе про изменение элемента массива по индексу: https://vuejs.org/v2/guide/reactivity.html#For-Arrays

БЛОГ НА HUSL

Не меняются классы div-ов (Vue.js)

Ответы (1 шт):