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

Question

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?

Bill Criswell · Accepted Answer · 2016-12-25 02:15:11Z

2

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

answered Dec 25, 2016 at 2:15

Bill Criswell

33k8 gold badges80 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Bill Criswell Over a year ago

No problem at all!

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related