Можно ли добавить vue компонент к традиционной html форме?

Question

Можно ли добавить vue компонент ввода к стандартной html форме? Я знаю, что это не идеальный способ обработки vue форм, но мне любопытно, что это может быть "быстрый и грязный" способ добавления пользовательских элементов в уже существующие html формы. Вот гипотетический пример:

<form action="/users" accept-charset="UTF-8" method="post">
  <input type="email" name="user[email]" />
  <input type="password" name="user[password]" />
  <my-custom-fancy-vue-component />
  <input type="submit"value="Sign up">
</form>

Мне интересно, может ли браузер прочитать значение, предоставляемое элементом ввода, из компонента vue и отправить его в качестве параметра, когда пользователь отправит форму. Есть ли другой способ сообщить браузеру, как получить доступ к значению из компонента vue, если, например, он не использует собственный ввод внутри, возможно, с использованием веб-компонента в качестве оболочки или с использованием shadow dom?

Answer 1

Любые элементы <input> в форме должны быть включены браузером при отправке формы. Браузер не будет заботиться о том, что <input> находится внутри компонента Vue.

Для компонентов, у которых еще нет <input> (или другого подходящего элемента формы), вы можете добавить скрытый ввод , <input type="hidden">, для хранения значения.

Если компонент, который вы хотите включить, является сторонним компонентом, вы не сможете добавить скрытый ввод напрямую. Однако вы все равно можете добавить его, используя компонент-оболочку. Пример ниже иллюстрирует, как вы можете справиться с этим сценарием.

const thirdPartyComponent = {
  template: `
    <button
      @click="onClick"
      type="button"
    >
      Increment {{ value }}
    </button>
  `,
  
  props: ['value'],
  
  methods: {
    onClick () {
      this.$emit('input', this.value + 1)
    }
  }
}

const myCustomFancyVueComponent = {
  template: `
    <div>
      <third-party-component v-model="counter" />
      <input type="hidden" :value="counter">
    </div>
  `,
  
  components: {
    thirdPartyComponent
  },
  
  data () {
    return {
      counter: 4
    }
  }
}

new Vue({
  el: 'form',
  
  components: {
    myCustomFancyVueComponent
  }
})

<script src="https://unpkg.com/vue@2.6.11/dist/vue.js"></script>

<form action="/users" accept-charset="UTF-8" method="post">
  <input type="email" name="user[email]">
  <input type="password" name="user[password]">
  <my-custom-fancy-vue-component></my-custom-fancy-vue-component>
  <input type="submit" value="Sign up">
</form>