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?

Please provide your function so we can help – KienHT Dec 10 '20 at 09:08 — KienHT, Dec 10 '20 at 09:08

score 0 · Answer 1 · answered Dec 10 '20 at 09:20

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>

Thank you, I tried that and it did work. But I have another question. I want to do a similar logic for my toggle switches. If toggle1 is clicked, I want my toggle2 to be unchecked. Let's say toggle1 is opened first, then I clicked toggle2. At this point I only want toggle2 to be selected, not the other one. How can I do that? — Yasin Demirkaya, Dec 10 '20 at 10:48
with radio button you can select only one at time. selecting one automatically deselect others.not sure what are you trying to do. — Nilesh Patel, Dec 10 '20 at 11:01

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

1 Answers1