How to change the styles of elements in vue when clicking on the parent?

Question

Vue.js

I have this toggle switch to switch languages

<div class="lang-changer">
        <div class="lang-tog"><span id="current-lang">РУ</span><span class="lang-tog-circle"></span></div>
      </div>

How do I change styles when clicking on the toggle switch #current-lang ; .lang-tog-circle and .lang-tog

Answer 1

<div class="lang-changer" @click="toggle = !toggle">
  <div :class="toggle ? 'lang-tog': 'lang'">
    <span :class="toggle ? 'a': 'b'">РУ</span>
    <span :class="toggle ? 'x': 'y'"></span>
  </div>
</div>

data(){
  return {
    toggle: false;
  }
}

True, it’s better to change the styles of nested spans simply through css, relative to the top one.