I created a vuejs web component with VueCli3
, the final compiled component looks like this:
<script src="https://unpkg.com/vue"></script>
<script src="./my-lib.js"></script>
<my-lib></my-lib>
This web component simply creates a hidden input with some value. when I inspect it in the browser:
<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>
I want to use this inside a form
in a none-vue page alongside with other inputs, like this:
<form method="post" action="/test.php">
<input type="text" name="title" value="foo">
<my-lib></my-lib>
<button type="submit">submit</button>
</form>
Now the problem is when I submit the form, only title
parameter appears in the backend, the my_input
param does not exist!
What should I do to make it work?