CODEWITHSUNDEEP
vue.js
Phuoc
Phuoc

Reputation: 1116

Binding style css in vuejs

I get into a problem. Here's my code:

<md-table-cell
  :style="arrDisplay[1][i1+3] > 0 ? {background: 'orange'}: ''"
  colspan="3"
  v-for="(m1, i1) in 2"
  :key="i1"
>
  <div
    contenteditable
    v-text="arrDisplay[1][i1+3] > 0 ? arrDisplay[1][i1+3] : ''"
    @blur="onEdit(1, i1+3)"
  ></div>
  <div class="del" v-if="arrDisplay[1][i1+3] > 0">
    <md-icon>clear</md-icon>
  </div>
</md-table-cell>

I want the table cell have orange background when it's value > 0 else white. It work perfectly fine after calculate arrayDisplay but not when I edit it:

onEdit(y, x) {
  var src = event.target.innerText
  this.arrDisplay[y][x] = parseInt(src)
},

But if I edit it by Vue DeveloperTools it works. I think if I'm right the reason maybe Vue does not recognize that I change arrDisplay but have no idea how to fix it. What should I do ?

Upvotes: 0

Views: 49

Answers (1)

Radu Diță
Radu Diță

Reputation: 14201

You are trying to update an item using an index in an array.

As explained here this is not reactive. That's why you don't see the update.

Try this:

Vue.set(this.arrDisplay[y], x, parseInt(src))

Note: make sure that this.arraDisplay[y] is reactive. If it is not, then you need to use Vue.set when creating it also.

Upvotes: 1

Related Questions