title: Passing data from HTTP request to a Sub-component VueJS
body: <p>i'm running into a bit of an issue with my VueJS <strong>(Vue 2)</strong> application.</p>
  
  <p>I i have a login component, which has a Sub-component called 'error' which is just a bootstrap alert showing a message which should come from the backend (via an HTTP request) the problem is i don't quite know how i can populate this message dynamically after an HTTP request.</p>
  
  <p>So, to reiterate, i have a parent <strong>Login</strong> component which shows a Login form, that component, in it's <strong>Template</strong> requires an <strong>"Error"</strong> sub-component which is just a bootstrap alert.</p>
  
  <p>I need to set a message for that sub-component based on the response from an HTTP request made by the "Login" component, which is the direct parent of the "error" component i want the message to display on...</p>
  
  <p>Do you do this through props? If so how exactly? This is my current HTML template for the <strong>Login</strong> component</p>
  
  <pre><code>&lt;template&gt;
      &lt;div class="container-fluid"&gt;
          &lt;!-- Error display component --&gt;
          &lt;error v-if="hasError" v-bind:errorMessage='errorMessage'&gt;&lt;/error&gt;
          ...Login form HTML....
  &lt;/template&gt;
  
  &lt;script&gt;
      import Error from './partials/Error.vue';
  
      export default {
          mounted() {
              this.usernameInput  = document.getElementById('email')
              this.passwordInput  = document.getElementById('password')
              this.submitButton   = document.getElementById('submitBtn')
              this.errorContainer = document.getElementById('errorContainer') 
          },
          methods: {
              submitForm: (e) =&gt; {
                  e.preventDefault();
  
              }
          },
          data() {
              return {
                  usernameInput: undefined,
                  passwordInput: undefined,
                  submitButton: undefined,
                  errorContainer: undefined,
                  errorMessage: null,
                  hasError: false,
                  email: null,
                  password: null
              }
          },
          components: {
              'error': Error
          }
      }   
  &lt;/script&gt;
  </code></pre>
  
  <p>And for the <strong>Error</strong> component</p>
  
  <pre><code>&lt;template&gt;
      &lt;div class="alert alert-danger fade in"&gt;
      &lt;a href="#" class="close" data-dismiss="alert"&gt;&amp;times;&lt;/a&gt;
      &lt;strong&gt;Error!&lt;/strong&gt; {{ errorMessage }}
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      export default {
          props: ['']
      }
  &lt;/script&gt;
  </code></pre>