Html Can'；在文本输入字段中键入（Vue.js）

所以我一直在用Laravel/Vue开发一个新表单来添加地址，但由于一些奇怪的原因，我无法在文本输入字段中键入任何内容。我已经没有办法解决这个问题了，谷歌似乎也帮不上忙，任何帮助都将不胜感激

编辑：它实际上也发生在另一个页面上

• 如果我把它改成数字或日期，它就行了

• 如果我在Vue dev tools中更改v-model中的变量，它在文本框中也会更改

• 移除v模型并不能修复它

• 为每个输入添加了结束标记，但没有修复任何内容

• 我在v-model变量中分配了一些低端线或低端线，所以我把它们取出来，只是把它们都做成了大写，但这并没有解决任何问题

• 我在CSS中添加了以下代码，但没有修复任何问题：
  .form输入{z-index:1000；}

我的.vue文件：

    <!-- 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>

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;

---

我认为这里的问题可能是这样的

data（）{
返回{
表格：新表格({
用户名：''，用户ID:''，KLANT:''，KLANTNAAM2:''，可见：''，斯特拉特：''，邮编：''，
PLAATSNAAM:''，LAND:''，CMRKLANT:''，CMRSTRAAT:''，CMRPOSTCODE:''，CMRLAND:''，IDAFZENDER:''，
IDTRANSPORT:''，TELEFOON:''，MOBILE:''，EMAIL:''，EMAIL2:''，DEURCODE:''，
UPENDO:“”，INFOKLANT:“”，INFOBON:“”，EMAILPREALERT:“”，IDTRANSPORTBON:“”，EMAILDELIVERY:“”，
EMAILCCDELIVERY:''，区域：''，WIDOCZNYSHIPMENT:''，
}),
}
}

我认为这里的问题可能是

data（）{
返回{
表格：新表格({
用户名：''，用户ID:''，KLANT:''，KLANTNAAM2:''，可见：''，斯特拉特：''，邮编：''，
PLAATSNAAM:''，LAND:''，CMRKLANT:''，CMRSTRAAT:''，CMRPOSTCODE:''，CMRLAND:''，IDAFZENDER:''，
IDTRANSPORT:''，TELEFOON:''，MOBILE:''，EMAIL:''，EMAIL2:''，DEURCODE:''，
UPENDO:“”，INFOKLANT:“”，INFOBON:“”，EMAILPREALERT:“”，IDTRANSPORTBON:“”，EMAILDELIVERY:“”，
EMAILCCDELIVERY:''，区域：''，WIDOCZNYSHIPMENT:''，
}),
}
}

谢谢您的帮助，但我似乎忘记了父组件中有一个函数，它监听所有按键并阻止默认设置，而不是只监听箭头键然后阻止默认设置。一直在表单文件中搜索，但它甚至不在表单文件中。

感谢您的帮助，但我似乎忘记了父组件中有一个函数，它侦听所有按键并阻止默认设置，而不是只侦听箭头键然后阻止默认设置。一直在表单文件中搜索，但表单文件不在其中。

请发布控制台错误请为此使用创建一个来显示问题的发生。根本没有控制台错误，但我将开始尝试在沙箱中复制它，并将结果发布到此处。请发布控制台错误请为此使用创建一个来显示问题出现问题。根本没有控制台错误，但我将开始尝试在沙盒中复制它，并将结果发布到此处。尝试此操作时，我会出现以下错误：[Vue warn]：呈现错误：“TypeError:无法读取未定义的属性'has'和：TypeError:无法读取的属性'has'undefined@casperb,表单对象中没有错误属性。请你用更多的信息更新你的问题。我需要查看方法

form.errors.has（xxxx）

的实现。我已经将form.js和errors.js添加到post.HI，@casperb，问题似乎在于您设置数据属性的方式。使用

新表单

，似乎在键入时创建了表单的新实例。你能简化一点吗？让我确认我的理论数据（）{return{form:{USERNAME:''，…..errors:{USERNAME:'}}}}}请尝试输入。让我们看看它是否有效。您可以将错误逻辑放入mixin中。抱歉，@casperb，我刚刚学习了面向对象表单。我要离开我过去所知道的。请检查vue开发工具。更改是否在那里生效？尝试此操作时，我遇到以下错误：[Vue warn]：呈现中的错误：“TypeError:无法读取未定义的属性'has'和：TypeError:无法读取未定义的属性'has'undefined@casperb，窗体对象中没有错误属性。请你用更多的信息更新你的问题。我需要查看方法

form.errors.has（xxxx）

的实现。我已经将form.js和errors.js添加到post.HI，@casperb，问题似乎在于您设置数据属性的方式。使用

新表单

，似乎在键入时创建了表单的新实例。你能简化一点吗？让我确认我的理论数据（）{return{form:{USERNAME:''，…..errors:{USERNAME:'}}}}}请尝试输入。让我们看看它是否有效。您可以将错误逻辑放入mixin中。抱歉，@casperb，我刚刚学习了面向对象表单。我要离开我过去所知道的。请检查vue开发工具。这些变化是否在那里生效？

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;