Блог

Главная - Вопросы по программированию - Переключатель Nuxt js не может быть нажат, но не отключен

Переключатель Nuxt js не может быть нажат, но не отключен

#typescript #vue.js #radio-button #nuxt.js

#typescript #vue.js #переключатель #nuxt.js

Вопрос:

У меня есть переключатель, который не проверяется.

Он работает на других страницах, но я просто не могу щелкнуть его здесь.

 <div class="form-group">
                    <label class="control-label">同居予定の有無</label>
                    <div class="radioCont">
                      <div class="form-check form-check-inline">
                        <label class="form-check-label"
                          ><input
                            id="yes"
                            v-model="properties.is_living_together"
                            class="form-check-input btn-group-toggle"
                            type="radio"
                            name="livingTogether"
                            value="1"
                            tabindex="7"
                          />有</label
                        >
                      </div>
                      <div class="form-check form-check-inline">
                        <label class="form-check-label"
                          ><input
                            id="no"
                            v-model="properties.is_living_together"
                            class="form-check-input btn-group-toggle"
                            type="radio"
                            name="livingTogether"
                            value="0"
                            tabindex="8"
                          />無</label
                        >
                      </div>
                    </div>
                  </div>
                </div>

Вот свойства

 properties = {
.....
employer: '',
residence_card_number: '',
// @ts-ignore
is_living_together: ''

}

Любая помощь приветствуется.

Комментарии:

1. код, кажется, в порядке. Вы уверены, что нет div, перекрывающего эти переключатели?

2. Вы также можете попробовать использовать клавиатуру для переключения и посмотреть, что произойдет. Я вижу, у вас определен довольно высокий tabIndex. (Интересно, почему, обычно вы хотели бы оставить его по умолчанию по соображениям доступности ..) В любом случае, вы могли бы легко проверить, работает ли это вместо щелчка.

3. Спасибо за ответы. Все еще не может исправить.

Ответ №1:

Причиной был обработчик щелчка во внешнем режиме div. Изменен

 <div
  id="statusConfirmModal"
  class="modal fade show"
  tabindex="-1"
  role="dialog"
  aria-labelledby="statusConfirmModal"
  @click.prevent.self="remove"
>

Для

 <div
  id="statusConfirmModal"
  class="modal fade show"
  tabindex="-1"
  role="dialog"
  aria-labelledby="statusConfirmModal"
  @click.self.prevent="remove"
>