无法输入文本输入字段（Vue.js）

Question

So I've been working on a new form in Laravel/Vue to add an address but for some weird reason I'm not able to type anything in the text input fields. I've ran out of ideas to fix this and google doesn't seem to help either, any help would be appreciated allot!

Edit: It's actually happening on another page too.

• If I change it to number or date it does work.

• If I change the variable from the v-model in Vue dev tools it does change in the text box.

• Removing the v-model doesn't fix it.

• Added the closing tag for each input but didn't fix anything.

• I had allot of low lines or lines in the v-model variables so I took them out and just made them all caps but it didn't fix anything

• I've added the following code to my CSS but it didn't fix anything:

  .form-input{ z-index:1000; }

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="">

  <input class="form-input" type="hidden" name="username" placeholder="username" v-model="form.USERNAME">
  <input class="form-input" type="hidden" name="username" placeholder="username" v-model="form.USERID">

<div class="form-input-container">
  <label class="modal-input-label" for="KLANT">Klant:</label>
  <input class="form-input" type="text" name="KLANT" placeholder="Klant" v-model="form.KLANT"></input>
</div>
<span class="form-errors" v-if="form.errors.has('KLANT')" v-text="form.errors.get('KLANT')"></span>

<div class="form-input-container">
  <label class="modal-input-label" for="KLANTNAAM2">Klant Naam 2:</label>
  <input class="form-input" type="text" name="KLANTNAAM2" placeholder="KlantNaam2" v-model="form.KLANTNAAM2"></input>
</div>
<span class="form-errors" v-if="form.errors.has('KLANTNAAM2')" v-text="form.errors.get('KLANTNAAM2')"></span>

<div class="form-input-container">
  <label class="modal-input-label" for="VISIBLE">Visible:</label>
  <input class="form-input" type="text" name="VISIBLE" placeholder="Visible" v-model="form.VISIBLE"></input>
</div>
<span class="form-errors" v-if="form.errors.has('VISIBLE')" v-text="form.errors.get('VISIBLE')"></span>

<div class="form-input-container">
  <label class="modal-input-label" for="STRAAT">Straat:</label>
  <input class="form-input" type="text" name="STRAAT" placeholder="Straat" v-model="form.STRAAT"></input>
</div>
<span class="form-errors" v-if="form.errors.has('STRAAT')" v-text="form.errors.get('STRAAT')"></span>

<div class="form-input-container">
  <label class="modal-input-label" for="POSTCODE">Postcode:</label>
  <input class="form-input" type="text" name="POSTCODE" placeholder="Postcode" v-model="form.POSTCODE"></input>
</div>
<span class="form-errors" v-if="form.errors.has('POSTCODE')" v-text="form.errors.get('POSTCODE')"></span>

<div class="form-input-container">
  <label class="modal-input-label" for="PLAATSNAAM">Plaatsnaam:</label>
  <input class="form-input" type="text" name="PLAATSNAAM" placeholder="Plaatsnaam" v-model="form.PLAATSNAAM"></input>
</div>
<span class="form-errors" v-if="form.errors.has('PLAATSNAAM')" v-text="form.errors.get('PLAATSNAAM')"></span>

<div class="form-input-container">
  <label class="modal-input-label" for="LAND">Land:</label>
  <input class="form-input" type="text" name="LAND" placeholder="Land" v-model="form.LAND"></input>
</div>
<span class="form-errors" v-if="form.errors.has('LAND')" v-text="form.errors.get('LAND')"></span>

<div class="form-input-container">
  <label class="modal-input-label" for="CMRKLANT">CMR Klant:</label>
  <input class="form-input" type="text" name="CMRKLANT" placeholder="CMRKlant" v-model="form.CMRKLANT"></input>
</div>
<span class="form-errors" v-if="form.errors.has('CMRKLANT')" v-text="form.errors.get('CMRKLANT')"></span>

<div class="form-input-container">
  <label class="modal-input-label" for="CMRSTRAAT">CMR Straat:</label>
  <input class="form-input" type="text" name="CMRSTRAAT" placeholder="CMRStraat" v-model="form.CMRSTRAAT"></input>
</div>
<span class="form-errors" v-if="form.errors.has('CMRSTRAAT')" v-text="form.errors.get('CMRSTRAAT')"></span>

<div class="form-input-container">
  <label class="modal-input-label" for="CMRPOSTCODE">CMR Postcode:</label>
  <input class="form-input" type="text" name="CMRPOSTCODE" placeholder="CMRPostcode" v-model="form.CMRPOSTCODE"></input>
</div>
<span class="form-errors" v-if="form.errors.has('CMRPOSTCODE')" v-text="form.errors.get('CMRPOSTCODE')"></span>

<div class="form-input-container">
  <label class="modal-input-label" for="CMRPLAATSNAAM">CMR Plaatsnaam:</label>
  <input class="form-input" type="text" name="CMRPLAATSNAAM" placeholder="CMRPlaatsnaam" v-model="form.CMRPLAATSNAAM"></input>
</div>
<span class="form-errors" v-if="form.errors.has('CMRPLAATSNAAM')" v-text="form.errors.get('CMRPLAATSNAAM')"></span>

<div class="form-input-container">
  <label class="modal-input-label" for="CMRLAND">CMR Land:</label>
  <input class="form-input" type="text" name="CMRLAND" placeholder="CMRLand" v-model="form.CMRLAND"></input>
</div>
<span class="form-errors" v-if="form.errors.has('CMRLAND')" v-text="form.errors.get('CMRLAND')"></span>

<div class="form-input-container">
  <label class="modal-input-label" for="IDAFZENDER">ID Afzender:</label>
  <input class="form-input" type="text" name="IDAFZENDER" placeholder="IDAfzender" v-model="form.IDAFZENDER"></input>
</div>
<span class="form-errors" v-if="form.errors.has('IDAFZENDER')" v-text="form.errors.get('IDAFZENDER')"></span>

<div class="form-input-container">
  <label class="modal-input-label" for="IDTRANSPORT">ID Transport:</label>
  <input class="form-input" type="text" name="IDTRANSPORT" placeholder="IDTransport" v-model="form.IDTRANSPORT"></input>
</div>
<span class="form-errors" v-if="form.errors.has('IDTRANSPORT')" v-text="form.errors.get('IDTRANSPORT')"></span>

<div class="form-input-container">
  <label class="modal-input-label" for="TELEFOON">Telefoon:</label>
  <input class="form-input" type="text" name="TELEFOON" placeholder="Telefoon" v-model="form.TELEFOON"></input>
</div>
<span class="form-errors" v-if="form.errors.has('TELEFOON')" v-text="form.errors.get('TELEFOON')"></span>

<div class="form-input-container">
  <label class="modal-input-label" for="E-MAIL">Email:</label>
  <input class="form-input" type="text" name="EMAIL" placeholder="Email" v-model="form.EMAIL"></input>
</div>
<span class="form-errors" v-if="form.errors.has('EMAIL')" v-text="form.errors.get('EMAIL')"></span>

<div class="form-input-container">
  <label class="modal-input-label" for="EMAIL2">E-mail2:</label>
  <input class="form-input" type="text" name="EMAIL2" placeholder="Email2" v-model="form.EMAIL2"></input>
</div>
<span class="form-errors" v-if="form.errors.has('EMAIL2')" v-text="form.errors.get('EMAIL2')"></span>

<div class="form-input-container">
  <label class="modal-input-label" for="DEURCODE">Deur code:</label>
  <input class="form-input" type="text" name="DEURCODE" placeholder="Deurcode" v-model="form.DEURCODE"></input>
</div>
<span class="form-errors" v-if="form.errors.has('DEURCODE')" v-text="form.errors.get('DEURCODE')"></span>

<div class="form-input-container">
  <label class="modal-input-label" for="UPENDO">Upendo:</label>
  <input class="form-input" type="text" name="UPENDO" placeholder="Upendo" v-model="form.UPENDO"></input>
</div>
<span class="form-errors" v-if="form.errors.has('UPENDO')" v-text="form.errors.get('UPENDO')"></span>

<div class="form-input-container">
  <label class="modal-input-label" for="INFOKLANT">Info Klant:</label>
  <input class="form-input" type="text" name="INFOKLANT" placeholder="InfoKlant" v-model="form.INFOKLANT"></input>
</div>
<span class="form-errors" v-if="form.errors.has('INFOKLANT')" v-text="form.errors.get('INFOKLANT')"></span>

<div class="form-input-container">
  <label class="modal-input-label" for="INFOBON">Info Bon:</label>
  <input class="form-input" type="text" name="INFOBON" placeholder="InfoBon" v-model="form.INFOBON"></input>
</div>
<span class="form-errors" v-if="form.errors.has('INFOBON')" v-text="form.errors.get('INFOBON')"></span>

<div class="form-input-container">
  <label class="modal-input-label" for="EMAILPREALERT">E-mail Prealert:</label>
  <input class="form-input" type="text" name="EMAILPREALERT" placeholder="EmailPrealert" v-model="form.EMAILPREALERT"></input>
</div>
<span class="form-errors" v-if="form.errors.has('EMAILPREALERT')" v-text="form.errors.get('EMAILPREALERT')"></span>

<div class="form-input-container">
  <label class="modal-input-label" for="IDTRANSPORTBON">ID Transport Bon:</label>
  <input class="form-input" type="text" name="IDTRANSPORTBON" placeholder="IDTransportBon" v-model="form.IDTRANSPORTBON"></input>
</div>
<span class="form-errors" v-if="form.errors.has('IDTRANSPORTBON')" v-text="form.errors.get('IDTRANSPORTBON')"></span>

<div class="form-input-container">
  <label class="modal-input-label" for="EMAILDELIVERY">E-mail Delivery:</label>
  <input class="form-input" type="text" name="EMAILDELIVERY" placeholder="EmailDelivery" v-model="form.EMAILDELIVERY"></input>
</div>
<span class="form-errors" v-if="form.errors.has('EMAILDELIVERY')" v-text="form.errors.get('EMAILDELIVERY')"></span>

<div class="form-input-container">
  <label class="modal-input-label" for="EMAILCCDELIVERY">E-mailCC Delivery:</label>
  <input class="form-input" type="text" name="EMAILCCDELIVERY" placeholder="EmailCCDelivery" v-model="form.EMAILCCDELIVERY"></input>
</div>
<span class="form-errors" v-if="form.errors.has('EMAILCCDELIVERY')" v-text="form.errors.get('EMAILCCDELIVERY')"></span>

<div class="form-input-container">
  <label class="modal-input-label" for="AREA">Area:</label>
  <input class="form-input" type="text" name="AREA" placeholder="Area" v-model="form.AREA"></input>
</div>
<span class="form-errors" v-if="form.errors.has('AREA')" v-text="form.errors.get('AREA')"></span>

<div class="form-input-container">
  <label class="modal-input-label" for="WIDOCZNYSHIPMENT">Widoczny Shipment:</label>
  <input class="form-input" type="text" name="WIDOCZNYSHIPMENT" placeholder="WidocznyShipment" v-model="form.WIDOCZNYSHIPMENT"></input>
</div>
<span class="form-errors" v-if="form.errors.has('WIDOCZNYSHIPMENT')" v-text="form.errors.get('WIDOCZNYSHIPMENT')"></span>

<button class="btn btn-primary form-submit" type="submit" name="button" :disabled="form.errors.any()">Submit</button>


</form>
</div>

</div>
  </div>

</template>

<script>
export default {
    props: ['selectedShipment'],

  data(){
    return{

      form: new Form({
        USERNAME: '', USERID: '',  KLANT: '',  KLANTNAAM2: '',  VISIBLE: '',  STRAAT: '',  POSTCODE: '',
        PLAATSNAAM: '',  LAND: '',  CMRKLANT: '',  CMRSTRAAT: '',  CMRPOSTCODE: '',  CMRLAND: '',  IDAFZENDER: '',
        IDTRANSPORT: '',  TELEFOON: '',  MOBILE: '',  EMAIL: '',  EMAIL2: '',  DEURCODE: '',
        UPENDO: '',  INFOKLANT: '',  INFOBON: '',  EMAILPREALERT: '',  IDTRANSPORTBON: '',  EMAILDELIVERY: '',
        EMAILCCDELIVERY: '',  AREA: '',  WIDOCZNYSHIPMENT: '',
     }),
    }
  },

  watch: {
    // Kijkt of de selected shipment veranderd.
    // Zet de juiste data in t form.
    selectedShipment(){
     this.form.USERNAME = this.selectedShipment[1][0][0].USERNAME;
     this.form.USERID = this.selectedShipment[1][0][0].USERID;
    }
  },



  methods: {
    // Stuur bericht naar parent om modal te sluiten.
    close(){
      this.$emit('closed');
    },

    // Submit form.
    onSubmit(){
      this.$emit('shipment-added', this.form.data());
      this.form.submit('post', '/app/shipments/add')
      .then(data =>   this.$emit('shipment-added2', data));
      this.$emit('closed');
    },

  },
}
</script>

<style lang="css" scoped>
</style>

My CSS for the form/inputs:

.form-input-container{
  display: grid;
  grid-template-columns: 40% 36%;
  grid-gap: 50px;
}

.modal-input-label{
  text-align: end;
  margin-top: 10px;
}

.form-input{
  text-align: center;
      display: inline-block;
      margin: 10px;
      border-radius: 1em;
      width: 220px;
      box-shadow: 1px 1px 1px black;
}

.form-container{
  background-color: white;
      color: black;
      width: 38%;
      z-index: 301;
      position: fixed;
      left: 31%;
      top: 10%;
      border-radius: 1em;
      text-align: -webkit-center;
      padding: 25px;
      height: 80vh;
      overflow-y: scroll;
}

.form-modal{
  z-index: 300;
      width: 100%;
      height: 100%;
      text-align: -webkit-center;
      position: fixed;
      background-color: rgb(0, 0, 0, 0.5);
      left: 0;
      top: 0;
}

.form-errors{
  display: block;
    color: red;
}

Form.js:

import Errors from './Errors';

class Form {
    /**
     * Create a new Form instance.
     *
     * @param {object} data
     */
    constructor(data) {
        this.originalData = data;

        for (let field in data) {
            this[field] = data[field];
        }

        this.errors = new Errors();
    }


    /**
     * Fetch all relevant data for the form.
     */
    data() {
        let data = {};

        for (let property in this.originalData) {
            data[property] = this[property];
        }

        return data;
    }


    /**
     * Reset the form fields.
     */
    reset() {
        for (let field in this.originalData) {
            this[field] = '';
        }

        this.errors.clear();
    }


    /**
     * Send a POST request to the given URL.
     * .
     * @param {string} url
     */
    post(url) {
        return this.submit('post', url);
    }


    /**
     * Send a PUT request to the given URL.
     * .
     * @param {string} url
     */
    put(url) {
        return this.submit('put', url);
    }


    /**
     * Send a PATCH request to the given URL.
     * .
     * @param {string} url
     */
    patch(url) {
        return this.submit('patch', url);
    }


    /**
     * Send a DELETE request to the given URL.
     * .
     * @param {string} url
     */
    delete(url) {
        return this.submit('delete', url);
    }


    /**
     * Submit the form.
     *
     * @param {string} requestType
     * @param {string} url
     */
    submit(requestType, url) {
        return new Promise((resolve, reject) => {
            axios[requestType](url, this.data())
                .then(response => {
                    this.onSuccess(response.data);

                    resolve(response.data);
                })
                .catch(error => {
                    this.onFail(error.response.data);

                    reject(error.response.data);
                });
        });
    }


    /**
     * Handle a successful form submission.
     *
     * @param {object} data
     */
    onSuccess(data) {

        this.reset();
    }


    /**
     * Handle a failed form submission.
     *
     * @param {object} errors
     */
    onFail(errors) {
        this.errors.record(errors.errors);
    }
}

export default Form;

Errors.js:

class Errors {
    /**
     * Create a new Errors instance.
     */
    constructor() {
        this.errors = {};
    }


    /**
     * Determine if an errors exists for the given field.
     *
     * @param {string} field
     */
    has(field) {
        return this.errors.hasOwnProperty(field);
    }


    /**
     * Determine if we have any errors.
     */
    any() {
        return Object.keys(this.errors).length > 0;
    }


    /**
     * Retrieve the error message for a field.
     *
     * @param {string} field
     */
    get(field) {
        if (this.errors[field]) {
            return this.errors[field][0];
        }
    }


    /**
     * Record the new errors.
     *
     * @param {object} errors
     */
    record(errors) {
        this.errors = errors;
    }


    /**
     * Clear one or all error fields.
     *
     * @param {string|null} field
     */
    clear(field) {
        if (field) {
            delete this.errors[field];

            return;
        }

        this.errors = {};
    }
}

export default Errors;

Answer 1

I think the issue here may be this

 data(){ return{ form: new Form({ USERNAME: '', USERID: '', KLANT: '', KLANTNAAM2: '', VISIBLE: '', STRAAT: '', POSTCODE: '', PLAATSNAAM: '', LAND: '', CMRKLANT: '', CMRSTRAAT: '', CMRPOSTCODE: '', CMRLAND: '', IDAFZENDER: '', IDTRANSPORT: '', TELEFOON: '', MOBILE: '', EMAIL: '', EMAIL2: '', DEURCODE: '', UPENDO: '', INFOKLANT: '', INFOBON: '', EMAILPREALERT: '', IDTRANSPORTBON: '', EMAILDELIVERY: '', EMAILCCDELIVERY: '', AREA: '', WIDOCZNYSHIPMENT: '', }), } }

Try changing it to

 data(){ return{ form: { USERNAME: '', ... errors: { USERNAME: '', .... } }, } }

Answer 2

Thanks for the help but seems I just forgot I had a function in the parent component that listened to all key presses and prevented the default instead of only listening to the arrows keys and then preventing the default. Kept searching in the form file while it wasn't even in there.