Как использовать веб-компонент Vuejs в качестве элемента ввода в веб-приложении none-vue?

Как использовать веб-компонент Vuejs в качестве элемента ввода в веб-приложении none-vue?

16.09.2019 07:20:22 Просмотров 58 Источник

Я создал веб-компонент vuejs с VueCli3, окончательный скомпилированный компонент выглядит следующим образом:

<script src="https://unpkg.com/vue"></script>
<script src="./my-lib.js"></script>

<my-lib></my-lib>

Этот веб-компонент просто создает скрытый ввод с некоторым значением. когда я проверяю его в браузере:

<my-lib>
    #shadow-root (open)
        <style type="text/css">....</style>
        <div data-v-1ca2f958="" id="app">
           <input type="hidden" name="my_input" value="some value">
        </div>
</my-lib>

Я хочу использовать это внутри formна странице none-vue вместе с другими входами, например:

<form method="post" action="/test.php">
   <input type="text" name="title" value="foo">
   <my-lib></my-lib>
   <button type="submit">submit</button>
</form>

Теперь проблема в том, что когда я отправляю форму, titlemy_input не существует!

Что я должен сделать, чтобы заставить его работать?

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

Ответы - Как использовать веб-компонент Vuejs в качестве элемента ввода в веб-приложении none-vue? / How to use a Vuejs web component as an input element in a none-vue web app?

Harshal Patil

16.09.2019 08:12:33

При использовании веб-компонента с shadow DOM входные элементы в shadow DOM не передаются с помощью традиционной формы отправки. Подробнее читайте здесь .

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

function onSubmit() {


    const form = document.querySelector("form");

    const formData = new FormData();

    for (let x of form.elements) {
        formData.append(x.name,  x.value);
    }

    const customField = form.querySelector("my-lib");

    // Some way to access the custom form field's value
    formData.append("custom-field-name", customField.customValue);

    // Submit now
    // Write code to submit form using XHR or Fetch API
}

Чтобы сохранить некоторые нажатия клавиш, вы можете избежать цикла for, поскольку вы можете создать FormData, используя существующую форму:

const form = document.querySelector("form");
const formData = new FormData(form);
https://stackoverflow.com/questions/57950340/how-to-use-a-vuejs-web-component-as-an-input-element-in-a-none-vue-web-app/57950710#comment102314479_57950710
Спасибо за ответ:) должен ли я отправлять данные через Ajax?
https://stackoverflow.com/questions/57950340/how-to-use-a-vuejs-web-component-as-an-input-element-in-a-none-vue-web-app/57950710#comment102314509_57950710
@AhmadMobaraki, используйте XHRили FetchAPI!
Закрыть X