Here is a snippet of my HTML code:
<tr v-for="product in products"
:class="{'bg-red': product.toWrite }" :key="product.name">
<td @click="setObjectToWrite(product.name)" class="show-hover">
<u>{{product.name}}</u>
</td>
</tr>
I have an @onclick handler:
setObjectToWrite (name) {
// this.products = []
let products = this.products
products.forEach(p => {
if (p.name == name) {
p.toWrite = true // ignores
p.name+=' ' // now displays
}
})
console.log('new products', products) // OK
this.products = products
},
Although the handler seems to be working, as I can see the products array being updated in the console. However, the CSS is not changing as expected. (Changing the .name class does result in visible changes).
The initial state of my products array is: [{name: 'some name'},...]
I am somewhat puzzled and feeling like I may have misunderstood something.
After receiving assistance from @Ross Allen, I made some minor adjustments to get it to work:
setObjectToWrite (product) {
let name = product.name
let products = [...this.products]
products.forEach(p => {
...