title: How to add/remove class from parent div on change radio button in vuejs
body: <p>I have a simple code: </p>
  
  <pre><code>    &lt;div id="app"&gt;
  &lt;div class="xyz" :class="{ selectedRadio:radio_first }"&gt;
    &lt;input type="radio" name="example" @change="radio_first = true;radio_second = false"&gt;
  &lt;/div&gt;
  
  &lt;div class="abc" :class="{ selectedRadio:radio_second }"&gt;
    &lt;input type="radio" name="example" @change="radio_second = true;radio_first = false"&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>then: </p>
  
  <pre><code>    new Vue({
  
        el:"#app",
        data:{
          radio_first:false,
          radio_second:false
        }
  
  
  });
  </code></pre>
  
  <p>CSS: </p>
  
  <pre><code>    .xyz{
    display:inline;
    padding:20px;
    border:1px solid grey;
    margin-right:60px;
  }
  
  .abc{
    border:1px solid grey;
    display:inline;
    padding:20px;
  }
  
  .selectedRadio{
      background: lightgreen;
  }
  </code></pre>
  
  <p>So if I check the first radio button I want to add a new class to its parent div only. and if I check second radio I need to add a class to its parent div and remove that first added class to first radios parent div.
  I hope you guys understood what I want. I have tried this so far. it is working but what if I will have many radio buttons?is there any better way in vue js to solve this.
  here is the codepen link:  <a href="https://codepen.io/kohalirakesh/pen/KoPMEZ" rel="nofollow noreferrer">https://codepen.io/kohalirakesh/pen/KoPMEZ</a>
  Thank you.</p>