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

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

15.03.2020 11:40:26 Просмотров 12 Источник

Можно ли добавить входной компонент 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?

У вопроса есть решение - Посмотреть?

Ответы - Можно ли добавить компонент vue в традиционную html-форму? / Is it possible to add a vue component to a traditional html form?

Является ответом!
skirtle

15.03.2020 03:45:45

Любые элементы <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>

Закрыть X