Binding style css in vuejs

Question

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 ?

simplest thing would be to make the style a computed property — Michael
– Michael, Commented May 5, 2020 at 9:47

tony19 · Accepted Answer · 2022-07-16 03:13:37Z

1

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.

edited Jul 16, 2022 at 3:13

tony19

140k23 gold badges281 silver badges354 bronze badges

answered May 5, 2020 at 9:49

Radu Diță

14.3k2 gold badges33 silver badges37 bronze badges

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

Collectives™ on Stack Overflow

Binding style css in vuejs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related