Сделайте обязательным v-текстовое поле на основе выбора v-radio

Question

Я новичок в интерфейсе, особенно vue на своей странице регистрации, у меня есть эта v-radio-группа

<v-radio-group
  v-model="row"
    row
  >
  <v-radio
    label="personal"
    value="false"
    data-cy="input-individual"
  />
  <v-radio
    label="company"
    value="true"
  />
</v-radio-group>

, и я хочу указать номер телефона v-text-field и компанию имя требуется, если пользователь выбирает компанию

<v-text-field
  v-model="name"
  label="* fullname"
  :rules="requirerule"
  required
  data-cy="input-name"
/>

<v-text-field
  v-model="telephone"
    label="phone number"
    data-cy="input-telephone"
/>
<v-text-field
  v-model="companyname"
  label="company name"
  data-cy="input-companyname"
/>

У кого-нибудь есть решение, что мне делать, большое спасибо

Answer 1

Вам необходимо сопоставить значение вашего v-radio-group с моделью isCompany

<v-radio-group v-model="isCompany" row>
  <v-radio
    label="personal"
    :value="false"
  />
  <v-radio
    label="company"
    :value="true"
  />
</v-radio-group>

Затем в разделе <script> methods необходимо определить метод проверки и задать правило. чтобы проверить текстовое поле на основе значения isCompany

data(): {
  return {
    // ... 
    isCompany: false,
  }
  methods: {
    // .....
    requiredIfCompany: function(value) { 
      if(this.isCompany) {
        return !!value || 'Required.';
      }
      return true;
    }
  }
}

Затем на вашем v-text-field необходимо установить правила

<v-text-field v-model="telephone"
    :rules=[requiredIfCompany]
    label="phone number"
/>

Answer 2

Он должен работать нормально, пока вы используете,

<v-text-field
  v-model="telephone"
    label="phone number"
    data-cy="input-telephone"
    :required="row"
/>

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

<v-radio
    label="company"
    :value="true"
  />

Я только что сделал ваш value в :value, поэтому вместо чтения его в виде строки выполняется значение, которое будет считаться логическим.