Vue.js class binded to object is not changing on object update

Question

I have a number of buttons, being generated wuth v-for directive. all of them have initial class, based on the string from an object. I have an event, that is changing this string on button click. But the class is not being updated. What am i doing wrong?

<template>
    <v-layout>
        <v-btn v-for="cell in cells" :key='cell.id' v-bind:class='cell.color' 
            v-on:click='click(cell.id)'>
            <p v-if="cell.win">win</p>
            <p>{{cell.id}}</p>
        </v-btn>
    </v-layout>
</template>

<script>

export default {
    data: () => {
        return {
            cells: {

            },
            winId: 0,
        }
    },
    methods: {
        generateCells() {
            this.winId = Math.floor(Math.random() * 100);
            for (var i = 0; i < 100; i++) {
                this.cells[i] = {
                    id: i,
                    color: 'info'
                }
            }
        },
        click(id) {
            if (this.cells[id] == this.winId) {
                alert('you win');
                this.cells[id].color = 'success';
            } else {
                this.cells[id].color = 'warning';
            }
        }
    },
    created() {
        this.generateCells();
    }
}

</script>

I expect the button class to be updated upon respected object update. The object .color prperty is updated but the class remains initial.

tony19 · Accepted Answer · 2022-07-16 00:31:45Z

Due to the limitations of modern JavaScript (and the abandonment of Object.observe), Vue cannot detect property addition or deletion. Since Vue performs the getter/setter conversion process during instance initialization, a property must be present in the data object in order for Vue to convert it and make it reactive.

Read more here: Reactivity in Depth.

Vue provides an API to add properties to nested level objects and to make them reactive.

To do so, you can use

Vue.set(object, propertyName, value);

You can also use the vm.$set method

this.$set(this.someObject, 'b', 2);

So in your code, where you are setting the value of array you need to do

this.$set(this.cells, i, {
                           id: i,
                           color: 'info'
                         });

See the complete snippet below:

window.onload = () => {
  new Vue({
    el: '#app',
    data: () => {
      return {
        cells: {

        },
        winId: 0,
      }
    },
    methods: {
      generateCells() {
        this.winId = Math.floor(Math.random() * 100);
        for (var i = 0; i < 100; i++) {
          this.$set(this.cells, i, {
            id: i,
            color: 'info'
          })
        }
      },
      click(id) {
        if (this.cells[id] == this.winId) {
          alert('you win');
          this.cells[id].color = 'success';
        } else {
          this.cells[id].color = 'warning';
        }
      }
    },
    created() {
      this.generateCells();
    }
  })
}

body {
  padding: 1rem;
}

.info {
  color: blue;
}

.warning {
  color: red;
}

.success {
  color: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <v-layout>
    <v-btn v-for="cell in cells" :key='cell.id' v-bind:class='cell.color' v-on:click='click(cell.id)'>
      <p v-if="cell.win">win</p>
      <p>{{cell.id}}</p>
    </v-btn>
  </v-layout>
</div>

tony19 · Accepted Answer · 2022-07-16 04:23:27Z

0

Read in detail about data and methods in the Vue documentation.

It should be noted that properties in data are only reactive if they existed when the instance was created. That means if you add a new property,like:
vm.b = 'hi'
Then changes to b will not trigger any view updates.

you can use Vue.set() or this.$set() api when you set the prop value in loop.

or replace the whole object like:

var cells = {}
for (var i = 0; i < 100; i++) {
    cells[i] = {
    id: i,
    color: 'info'
    }
}
this.cells = cells

and then, in click callback:

var newCell = {}
if (this.cells[id] == this.winId) {
    alert('you win');
    newCell[id] = {id:id,color:'success'}
} else {
    newCell[id] = {id:id,color:'warning'}
}
this.cells = Object.assign({},this.cells,newCell)

edited Jul 16, 2022 at 4:23

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Jun 21, 2019 at 8:12

gwtjs

1211 gold badge1 silver badge4 bronze badges

Collectives™ on Stack Overflow

Vue.js class binded to object is not changing on object update

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related