CODEWITHSUNDEEP
cssvue.js
ceckenrode
ceckenrode

Reputation: 4703

How to access array elements inside vue.js conditional css class

I'm getting starting with Vue.js and I have a simple page set up to experiment with conditional css.

<div id="app">
  <div class="demo" @click="handleClick(0)" :class="{ 'red': attachRed[0] }">
  </div>
  <div class="demo" @click="handleClick(1)" :class="{ 'red': attachRed[1] }">
  </div>
  <div class="demo" @click="handleClick(2)" :class="{ 'red': attachRed[2] }">
  </div>
</div>

and then my js

new Vue({
  el: "#app",
  data: {
    attachRed: [false, false, false]
  },
  methods: {
    handleClick: function(index) {
      this.attachRed[index] = !this.attachRed[index];
      console.log(this.attachRed)
    }
  }
});

Each div is a grey block. When attaching the "red" class, the block turns red. attachRed array is updating every time a demo div is clicked. But the class is never added. If I start the attachRed property off as being true, then the red class is attached initially, but this isn't toggled when clicked. This works if these values aren't stored in an array though.

Is it possible to make the view bindings watch for these changes or to manually trigger one? Or is there some sort of gotcha when it comes to array properties?

Upvotes: 0

Views: 1282

Answers (1)

Bill Criswell
Bill Criswell

Reputation: 32921

It is a gotcha. This page goes into it a bit: https://vuejs.org/2016/02/06/common-gotchas/

In short, you want to do

var val = this.attachedRed[index]
this.attachedRed.$set(index, !val);

Upvotes: 2

Related Questions