エラーフォームコンポーネントにエラーを渡しますか？

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>