After creating a web component with VueJs using VueCli3, the compiled output appears as follows:
<script src="https://unpkg.com/vue"></script>
<script src="./my-lib.js"></script>
<my-lib></my-lib>
This particular web component generates a hidden input with a specific value. When inspected in the browser, it shows:
<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>
The intention is to integrate this web component within a form on a non-Vue page along with other inputs, like so:
<form method="post" action="/test.php">
<input type="text" name="title" value="foo">
<my-lib></my-lib>
<button type="submit">submit</button>
</form>
The issue arises when submitting the form, as only the 'title' parameter is received at the backend while the 'my_input' parameter does not come through. What steps should be taken to rectify this?