Passing errors to error-form component?

Question

How do pass errors from ajax to error-form component?

FormLink.vue component:

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

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

in App.js

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

Med · Accepted Answer · 2016-10-27 20:45:31Z

Pass your data using props:

FormLink Component:

<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 Component:

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

Thank you. Is there a way without having errors: [] in many components to keep it clean?
@I'll-Be-Back You mean not in both parent and child components? You don't. The point of using nested components is to seperate concerns. Here you do addLink in the parent, and you feel handling the ajax error not so related to this, so you create a child component, pass down the error to it, and the parent cares no more about what to do with the error. (note the name of errors don't have to be the same in both components) Sure you can inline the child into the parent, if the parent is not too large to handle at once, but also you have to seperate them if you're going to reuse the child.

Collectives™ on Stack Overflow

Passing errors to error-form component?

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related