использовать более одного v, если вы получаете брошенный NonErrorEmittedError в vuejs? - PullRequest
Новая
       12

использовать более одного v, если вы получаете брошенный NonErrorEmittedError в vuejs?

0 голосов
/ 23 февраля 2020

Я могу использовать только один v-if, но я пытаюсь создать шаговую форму, чтобы разделить ввод форм на шаги, и когда я добавляю другой v-if, с другой v-моделью, я получаю следующую ошибку используя laravel mix и vuejs, если у меня просто есть v-if, в котором ничего нет. Также кажется, что предупреждение об ошибке происходит, когда laravelmix компилируется, но просто получите пустую страницу, есть идеи, пожалуйста? 

 Laravel Mix 
 Error:-!../../node_modules/vue-loader/lib/loaders/templateLoader.js?? 
 vue-loader-options!../../../node_modules/vue-loader/lib/index.js?? 
 vue- 
 loader-options!./Step1.vue>
 vue&type=template&id=1feb510a&
 NonErrorEmittedError:(Emitted value instead of an instance of Error)

приложение. js файл 

require('./bootstrap');

window.Vue = require('vue');

import Step1 from './components/Step1.vue'

new Vue({
el: '#app',
components: {
    Step1
  }
});

компонент 

<template>
<form method="post" action="" class="form-group" @submit.prevent="onSubmit" @keydown="form.errors.clear($event.target.name)">

<div v-if="step === 1">
       <label for="firstName" class="col-sm-2 col-form-label">What's your first name</label>
        <div class="col-sm-4">
        <input type="text" class="form-control" id="first_name" name="first_name" v-model="form.first_name">
        </div>
        <span class="help is-danger" v-if="form.errors.has('first_name')" v-text="form.errors.get('first_name')"></span>
</div>

<div v-else>
        <label for="exampleName1">What's your last name</label>
        <input type="text" class="form-control" id="last_name" name="last_name" class="input" v-model="form.last_name">
        <span class="help is-danger" v-if="form.errors.has('last_name')" v-text="form.errors.get('last_name')"></span>

 </div>
 <button class="button is-primary" :disabled="form.errors.any()">send</button>
</form>
</template>

<script>
import Form from '../Form.js';

export default {
    data: function() {
        return {
            step:1,
            errors: [],
            form: new Form({
                first_name: '',
                last_name: ''
            })
        }
    },
    methods: {
        onSubmit() {
            this.form.post('/enquiry/step1')
                .then(response => alert('wahoo',

                ));

        }
    }
 }

Форма. js

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

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


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

    this.reset();
}


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

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


  /**
 * Determine if an errors exists for the given field.  removes span if not needed
 *
 * @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) {

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

1 Ответ

0 голосов
/ 23 февраля 2020

похоже, что у меня был дополнительный класс = "input", который я пропустил

...