Vue: In a nested v-for, :class binding is not working with mouseover / mouseout events

[nozer]

Version

2.3.0

Reproduction link

https://jsfiddle.net/49gptnad/301/

Steps to reproduce

Go to jsfiddle link
Hover over the list items. Colors should change but doesn't

What is expected?

For Vue to add the related class in :class binding

What is actually happening?

No class binding

[posva]

It's because of a reactivity caveat https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats
You can also do this: https://jsfiddle.net/e9704a9o/

[nozer]

I have been flippin' on my chair for a while because of this. Thank you!

[Huooo]

@posva Your demo revised the data which we usually get from database.But this option needs a front-end developer to do it and database isn't allowed revise by front-end developers. Then, I want to know next explanation meaning."Due to the limitations of modern JavaScript." This is original text from official documents. Can you tell me what "limitations" is about JavaScript?

[posva]

It means that js is built with that limitation. If you want to learn more you can check https://vuejs.org/v2/guide/reactivity.html#How-Changes-Are-Tracked 🙂

[Huooo]

@posva Thanks for your link. I will learn more about js and vue.