[Vuejs]-VueJS How to trigger a method by selecting different radio buttons?

0๐Ÿ‘

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>

Leave a comment