how to hide and check a radio button if condition is true - laravel

Question

Hy developers pls i have a vuejs code that i would love the radio checked if row.callback_phone starts with 05 or hide the div if callback_phone number is empty. pls my code is below.
<div class="row space" >
<div class="col-md-1">
<input type="radio" name="inp" :value="row.calling_no" aria-selected="true" :checked="checkcall" :disabled="checkInputFunction">
</div>
<div class="col-md-11">
<label class="mol">שלח למספר שממנו חייגו ({{ row.calling_no}})</label>
</div>
</div>
<div class="row space" >
<div class="col-md-1">
<input type="radio" name="inp" :value="row.callback_phone" :checked="checkback" :disabled="checkInputFunction2" >
</div>
<div class="col-md-11">
<label class="mol" >שלח למספר שהלקוח השאיר ({{ row.callback_phone}})</label>
</div>
</div>
my script is below
<script>
export default {
name: "MailModalComponent",
props: {
row: {
type: Object,
default: () => ({}),
}
},
data() {
return {
set_token: document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
pageUrl: window.pageUrl,
}
},
computed:{
checkcall() {
if (this.row.callback_phone.substring(0, 2) == '05') {
return true;
} else {
return false;
}
},
checkback() {
if (this.row.calling_no.substring(0, 2) == '05') {
return true;
} else {
return false;
}
},
checkInputFunction(){
if(Object.keys(this.row).length > 0){
if(this.row.calling_no == '' ||this.row.calling_no == 'Null' ||
this.row.calling_no?
this.row.calling_no.substring(0,2)!='05':true){
return true;
}else{
return false;
}
}
},
checkInputFunction2(){
if(Object.keys(this.row).length > 0){
if(this.row.callback_phone == '' ||this.row.callback_phone == 'Null' ||
this.row.callback_phone?
this.row.callback_phone.substring(0,2)!='05':true){
return true;
}else{
return false;
}
}
}
},
methods: {
submitToWhatsapp(e) {
e.preventDefault();
},
}
}
i just updated this code, i am fetching the data from my database, but i want conditionally render elements as stated above, please i need help.

Answer 1

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>