Hy, разработчики, пожалуйста, у меня есть код vuejs, который я бы хотел, чтобы радио проверило, если row.callback_phone начинается с 05, или скрыть div, если номер callback_phone пуст. пожалуйста, мой код ниже.
<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>
Мой скрипт ниже
<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();
},
}
}
Я только что обновил этот код, я получаю данные из своей базы данных, но я хочу, чтобы элементы отображались условно, как указано выше, пожалуйста, мне нужна помощь.
1 ответ
Ваш код отлично работал у меня. Я добавил ниже фрагмент с <input type="text />
, чтобы вы могли изменить row.callback_phone
, тогда, когда вы вводите значение, начинающееся с 05
, переключатель становится отмеченным.
Вы можете использовать v-if="row.calling_no && row.calling_no.length"
или v-if="row.callback_no && row.callback_no.length"
на div
, чтобы скрыть его.
Ознакомьтесь с документацией по условной визуализации.
Я добавил еще один computed
для 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>
Похожие вопросы
Новые вопросы
laravel
Laravel - это бесплатная веб-инфраструктура PHP с открытым исходным кодом, созданная Тейлором Отвеллом и предназначенная для разработки веб-приложений по архитектурному шаблону модель-представление-контроллер (MVC) на основе Symfony. Исходный код Laravel размещен на GitHub и лицензирован в соответствии с условиями лицензии MIT.