Recently, I encountered an issue while working on a new form using Laravel/Vue to input an address. Strangely, I found myself unable to type anything in the text input fields. Despite trying various solutions and seeking help from Google, the problem persists. Any suggestions or assistance would be greatly appreciated!
Edit: The same issue is occurring on another page as well.
Changing the input type to a number or date allows me to input text.
Altering the variable associated with the v-model in Vue dev tools reflects the change in the text box.
Removing the v-model attribute does not resolve the issue.
I ensured that each input had a closing tag, but it did not solve anything.
I also tried simplifying the v-model variables, yet the issue remained unresolved.
Adding the following code to my CSS did not have any effect:
.form-input{ z-index:1000; }
Snippet from my .vue file:
<!-- Add address modal. -->
<template>
<div>
<!-- Black overlay behind the form -->
<div class="form-modal" @click="close">
</div>
<!-- The form -->
<div class="form-container">
<h1 class="form-close-button" @click="close">X</h1>
<h1 class="font-weight-800">Add Address</h1>
<form @submit.prevent="onSubmit" @keydown="form.errors.clear($event.target.name)">
<input type="text" name="" value=""/>
<!-- Other input fields here -->
<button class="btn btn-primary form-submit" type="submit" name="button" :disabled="form.errors.any()">Submit</button>
</form>
</div>
</div>
</template>
<script>
// Vue component logic here
</script>
<style lang="css" scoped>
/* CSS styles for the form and inputs */
</style>
My CSS styling for the form/inputs:
// CSS styles for form and input fields
Form.js:
// JavaScript logic for handling form data
Errors.js:
// JavaScript functions for handling form errors