Question

如何将错误从ajax传递给error-form组件？

FormLink.vue组件：

<template>

    <error-form></error-form>

    <form class="form-horizontal">
     .
     .
    </form>
</template>

<script>
    export default {

        methods: {
            addLink: function (event) {
                event.preventDefault();
                this.$http.post('/user/link', {name: this.linkName, key: this.linkValue}).then(response => {
                    this.users.links.push(response.json());
                    this.linkName = '';
                    this.linkValue = '';
                }).error(function(errors) {
                   // how to pass errors data to <error-form> component?
                });
            },
        }
    }
</script>

ErrorForm.vue组件

<template>
    <div class="alert alert-danger">
        <strong>Errors!</strong><br><br>
        <ul>
          <li></li>
        </ul>
    </div>
</template>

<script>
    export default {

        ready() {
            console.log('Error Component ready.');
        },

        data: function () {
            return {

            }
        },
    }
</script>

在App.js中

Vue.component('form-link', require('./components/Profile/FormLink.vue'));
Vue.component('error-form', require('./components/Global/ErrorForm.vue'));

Answer 1

使用道具传递数据：

FormLink组件：

<template>
    <error-form :errors="errors"></error-form>
</template>

<script>
    EXPORT default {

        data() { 
          return {
             errors: []
          }
        },

        methods: {
            addLink: function (event) {
                event.preventDefault();
                this.$http.post('/user/link', {name: this.linkName, key: this.linkValue}).then(response => {
                    this.users.links.push(response.json());
                    this.linkName = '';
                    this.linkValue = '';
                }).error(function(errors) {

                   this.errors = errors;

                });
            },
        }
    }
</script>

ErrorForm组件：

<template>
    <div class="alert alert-danger">
        <strong>Errors!</strong><br><br>
        <ul>
          <li v-for="error in errors">{{ error }}</li>
        </ul>
    </div>
</template>

<script>
    EXPORT default {

       props: {
         errors: Array
       },

        ready() {
            console.log('Error Component ready.');
        },

        data: function () {
            return {

            }
        },
    }
</script>

将错误传递给错误格式组件？

1 个答案: