Vue 3 Composition API — отключение кнопки отправки формы до тех пор, пока не будут выполнены все условия

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

<button
  :disabled="disabled"
  type="submit"
  value="Submit"
  >
  Suggest
</button>

let disabled = ref(true);
let error = ref(false);

nextTick(() => {
  let inputs = Array.from(document.getElementsByClassName("form__input"));
  if (!error.value) {
    inputs.forEach((input) => {
      if (input.value === "") {
        disabled.value = true;
      } else {
        disabled.value = false;
      }
    });
  }
})

Кнопка отключена по умолчанию, но она не «включится» сама по себе, как только будут выполнены уже упомянутые условия.

Пока что я использую вспомогательный хук жизненного цикла nextTick(), который явно не помогает мне в этой ситуации.

Состояние «отключено» будет обновляться в консоли, но не в DOM.

Как я могу подойти к этому?

Ваше здоровье

disabled будет ложным только тогда, когда последний input имеет значение, отличное от "" - однако, как написано, что inputs.forEach запускается ровно один раз - и никогда не запускается снова, независимо от ваших входных значений ... так что есть две проблемы ... 1. Только последний вход определяет состояние отключено, и 2. вы когда-либо тестировали входы только один раз, прежде чем у вас была возможность даже ввести что-либо
Bravo 17.05.2022 10:06

Кроме того, если вы используете методы DOM, такие как document.getElementsByClassName в vue, вы используете vue неправильно

Bravo 17.05.2022 10:10

@Bravo Я знаю, почему существует проблема номер 2, но я не знаю, как проверить условие после заполнения всех входных данных. Кроме того, можете ли вы объяснить, почему использование document.getElementsByClassName во Vue неправильно?

Harrison Greeves 17.05.2022 10:15

может быть, «неправильно» — слишком сильное слово, но я никогда не использовал методы DOM в Vue для неясных вещей, таких как IntersectionObserver, например, для всплывающего окна прокрутки до верхней кнопки… никогда для получения значений из входных данных!

Bravo 17.05.2022 10:19
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Сравнение структур данных: Массивы и объекты в Javascript
Сравнение структур данных: Массивы и объекты в Javascript
Итак, вы изучили основы JavaScript и хотите перейти к изучению структур данных. Мотивация для изучения/понимания Структур данных может быть разной,...
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Прошлая статья была первой из цикла статей о создании системы электронной коммерции с использованием Keystone.js, и она была посвящена главным образом...
Приложение для отслеживания бюджета на React js для начинающих
Приложение для отслеживания бюджета на React js для начинающих
Обучение на практике - это проверенная тема для достижения успеха в любой области. Если вы знаете контекст фразы "Практика делает человека...
Стоит ли использовать React в 2022 году?
Стоит ли использовать React в 2022 году?
В 2022 году мы все слышим о трендах фронтенда (React, Vue), но мы не знаем, почему мы должны использовать эти фреймворки, когда их использовать, а...
0
4
27
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

возможно, вам следует использовать v-model, computed или @input, чтобы прослушать событие и изменить статус отключения кнопки.

разве это не должно быть @change не @input? но даже в этом случае это не понадобится, если вы используете computed, когда входы правильно подключены

Bravo 17.05.2022 10:20
Ответ принят как подходящий

Самое простое решение — использовать значение computed для установки отключенного состояния кнопки — на основе входных значений — если какие-либо из них пусты, кнопка отключена.

Вот простой пример

const { ref, createApp, computed } = Vue;
createApp({
    setup() {
        const input1 = ref("");
        const input2 = ref("");
        const input3 = ref("");
        // disabled is true if ANY input is empty string
        const disabled = computed(() => !input1.value || !input2.value || !input3.value);
        const clicked = () => console.log('clicked');
        return { input1, input2, input3, disabled, clicked };
    }
}).mount('#app');
<script src="https://unpkg.com/vue@next"></script>
<div id="app">
  Input 1: <input v-model="input1" type="text"/><br/>
  Input 2: <input v-model="input2" type="text"/><br/>
  Input 3: <input v-model="input3" type="text"/><br/>
  <button :disabled="disabled" @click="clicked">Click me</button>
</div>

Другие вопросы по теме