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();
        },
}

}

Я только что обновил этот код, я получаю данные из своей базы данных, но я хочу, чтобы элементы отображались условно, как указано выше, пожалуйста, мне нужна помощь.

0
devadewale 14 Июн 2020 в 09:49

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>
0
Shoejep 14 Июн 2020 в 11:14