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

时间：2020-07-21 14:53:14

标签： html css vue.js

因此，我一直在Laravel / Vue中开发一种新表单来添加地址，但是由于某些奇怪的原因，我无法在文本输入字段中键入任何内容。我已经没有办法解决此问题，Google似乎也无济于事，任何帮助将不胜感激！

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

  • 如果我将其更改为数字或日期，则可以使用。

  • 如果我在Vue开发工具中从v模型中更改了变量，它的确会在文本框中更改。

  • 删除v模型不能解决问题。

  • 为每个输入添加了结束标记，但没有解决任何问题。

  • 我在v-model变量中分配了低线或低线，因此我将它们取出并全部盖上了大写字母，但没有解决任何问题

  • 我已将以下代码添加到CSS中，但未解决任何问题：

    .form-input {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>

我的表单/输入的CSS：

.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;

2 个答案:

答案 0 :(得分：0)

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

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: '',
     }),
  }
}

尝试将其更改为

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

答案 1 :(得分：0)

感谢您的帮助，但看来我只是忘记了我在父组件中有一个函数，该函数可以侦听所有按键并阻止默认设置，而不是仅侦听箭头键然后阻止默认设置。继续搜索表单文件，甚至不在其中。

相关问题
最新问题