Как получить все input на странице через Vue.js?

Question

[Dcfgvy]

У меня в моем Vue.js приложении есть компонент SignForm, внутрь которого через slot подставляется контент. И вот проблема в том, что обработка и отправка данных на сервер идёт в компоненте регистрации (где как раз используется SignForm), а данные я могу просмотреть только внутри SignForm, насколько я понимаю. Вот код компонента SignForm:

<div class="global_sign_container">
        <div class="form_holder">
            <img src="base/logo.png" class="logo_img">
            <!--<form class="forma" method="post" :action="post_url">
                <slot></slot>
            </form>-->
            <div class="forma">
                <slot></slot>
            </div>
        </div>
    </div>

mounted() {
    this.setupButtonAction();
  },
  methods: {
    setupButtonAction() {
      // Найти все элементы с классом "violet-button" в слоте
      const violetButtons = this.$el.querySelectorAll('.btn');
      
      // Установить обработчик события для последней кнопки
      if (violetButtons.length > 0) {
        const lastVioletButton = violetButtons[violetButtons.length - 1];
        lastVioletButton.addEventListener('click', this.handleClick);
      }
    },
    handleClick() {
      console.log('clickkked');

      let inputs = this.$el.querySelectorAll('input');
      let formData = {};
      let i = 0;
      inputs.forEach(input => {
        console.log(input);
        this.$refs[String(i)] = input;
        formData['inputs'][input.name] = this.$refs[String(i)].value;
        i++;
      });
      console.log(formData)

      this.$emit('form_sent', formData);
    }
  }

И вот пример его использования в случае с регистрацией:

<SignForm post_url="/signup" @form_sent="signup">
        <button>Sign up with Google</button>
        <p class="sign_header special_text">SIGN UP</p>
        <div class="inputs_holder">
            <FormInput descr="Email" name="mail"></FormInput>
            <FormInput descr="Username" name="username"></FormInput>
            <FormInput descr="Password" name="pass1" input_type="password"></FormInput>
            <FormInput descr="Repeat password" input_type="password" name="pass2"></FormInput>
        </div>
        <div class="links_holder links_styled">
            <div class="empty_div"></div>
            <router-link to="/signin">Already have an account? Sign in</router-link>
            <div class="empty_div"></div>
        </div>
        <VioletButton>Sign up</VioletButton>
        <p class="policy_text links_styled">By clicking “Verify email & Sign up” you accept our 
            <a href="https://www.termsfeed.com/live/f8fadcbc-c99e-4240-be35-da863ba40f2f" target="_blank">Privacy Policy</a>, 
            <a href="https://www.termsofusegenerator.net/live.php?token=AZo73IHGi5wU9MMHdJ2vkZfXVSd9DaJF" target="_blank">Terms of Use</a> and 
            <a href="https://www.termsfeed.com/live/4a67103d-a6c0-4c14-9d2e-89944b669984" target="_blank">Cookie files policy</a></p>
    </SignForm>

Проблема в том, что в методе handleClick я не могу получить именно value input-ов (то есть имя он получить может, а при попытке получить input.value он пишет, что undefined). Поэтому я попробовал делать это через ref, но, опять же он пишет, что не может добавлять свойства:

TypeError: Cannot add property 0, object is not extensible

Поэтому возникает вопрос, как мне вообще получать эти значения? Вариант вручную прописать свойства ref не подходит, так как форм много и они разные.

Answer 1

[Nik Faraday]

Вы пытаетесь использовать неправильный синтаксис для создания объекта formData. Попробуйте вот так:

handleClick() {
  console.log('clicked');

  let inputs = this.$el.querySelectorAll('input');
  let formData = {};
  
  inputs.forEach(input => {
    formData[input.name] = input.value;
  });

  console.log(formData);

  this.$emit('form_sent', formData);
}

Comments

[Dcfgvy]

Огромное спасибо! Я видимо пытался записывать всё в объект inputs, который не был задан. Когда я его задал:

let formData = {
            'inputs': {}
        };

то всё заработало