VueJS How to trigger a method by selecting different radio buttons?

Question

I have a simple form with VueJS, at the beginning of the form there is a radio button group with three different choices. The rest of the form will be shown or hidden based on this radio selection. When I use @click it does not do the exact thing that I want. Here are my radio buttons;

                <div>
                <label class="form-radio">
                  <input type="radio" name="internetconnectiontype" id="dynmaicIP" value="dynamicIP">
                  <span><label>Dynamic IP</label></span>
                </label>

                <label class="form-radio">
                  <input type="radio" name="internetconnectiontype" id="staticIP" value="staticIP">
                  <span><label>Static IP</label></span>
                </label>

                <label class="form-radio">
                  <input type="radio" name="internetconnectiontype" id="pppoe" value="pppoe" checked>
                  <span><label>PPPoE</label></span>
                </label>
            </div>

After these buttons, I have two different groups, in other words two different divs to show and hide. First, if Dynamic IP is selected, two divs will be hidden, If the Static IP is selected then only the first Div will be visible and if the PPPoE is selected, only the second div will be appear.

When I use v-model it gives me the values when I change between radios, after that I wrote a method like if this value is selected then to that, if this one selected to those etc... but it didn't work either, I created variables and set them to false by default and tried to toggle them between true and false @change but i couldn't manage. How do I do that?

Answer 1

var app = new Vue({
  el: '#app',
  data() {
    return {
      connType: "",
    };
  },
})

body{
margin: 20px
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div>
      <label class="form-radio">
        <input
          type="radio"
          name="internetconnectiontype"
          id="dynmaicIP"
          value="dynamicIP"
          v-model="connType"
        />
        <span><label>Dynamic IP</label></span>
      </label>

      <label class="form-radio">
        <input
          type="radio"
          name="internetconnectiontype"
          id="staticIP"
          value="staticIP"
          v-model="connType"
        />
        <span><label>Static IP</label></span>
      </label>

      <label class="form-radio">
        <input
          type="radio"
          name="internetconnectiontype"
          id="pppoe"
          value="pppoe"
          v-model="connType"
        />
        <span><label>PPPoE</label></span>
      </label>
    </div>
    <div v-if="connType === 'dynamicIP'">
      {{ connType }}
    </div>
    <div v-else-if="connType === 'staticIP'">
      {{ connType }}
    </div>
    <div v-else-if="connType === 'pppoe'">
      {{ connType }}
    </div>
    <div v-else>Please select</div>
  </div>
</div>