[Vuejs]-How to hide and check a radio button if condition is true

by

0👍

✅

Your code worked fine for me. I’ve included a snippet below with a <input type="text /> to let you change row.callback_phone, then when you type a value starting with 05 the radio button becomes checked.

You can use v-if="row.calling_no && row.calling_no.length" or v-if="row.callback_no && row.callback_no.length" on a div to hide it.

Take a look at the documentation for conditional rendering.

I’ve added another computed for checkAnyButNotBoth.

new Vue({
  el: "#app",
  data: () => {
    return {
      row: {
        callback_phone: "",
        calling_no: ""
      }
    }
  },
  computed: {
    checkcall() {
      return this.row.calling_no.substring(0, 2) == '05';
    },
    checkback() {
      return this.row.callback_phone.substring(0, 2) == '05';
    },
    checkAnyButNotBoth() {
      return this.checkcall ? !this.checkback : this.checkback;
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div id="app">
  <div class="row space">
    <div class="col-md-1">
      <input type="radio" :checked="checkcall" v-if="row.calling_no && row.calling_no.length">
    </div>
    <div class="col-md-11">
      <label class="mol">Calling No: ({{ row.calling_no}})</label>
      <input type="text" v-model="row.calling_no" />
    </div>
  </div>

  <div class="row space">
    <div class="col-md-1">
      <input type="radio" :checked="checkback" v-if="row.callback_phone && row.callback_phone.length">
    </div>
    <div class="col-md-11">
      <label class="mol">Callback Phone: ({{ row.callback_phone}})</label>
      <input type="text" v-model="row.callback_phone" />
    </div>
  </div>

  <div class="row">

    <div class="col-12">
      calling_no starts with 05: {{checkcall}}
    </div>

    <div class="col-12">
      callback_phone starts with 05: {{checkback}}
    </div>

    <div class="col-12">
      either but not both start with 05: {{checkAnyButNotBoth}}
    </div>
  </div>
</div>

Leave a comment