The Form component

We start with the Form component.

The Form component holds an input element and a button. We enter a known/valid GitHub username in the input field, and when we press the button our application will go and ask GitHub for that user’s data.

Open the src/components folder. Right now there is one file called HelloWorld.vue. Add another one called Form.vue.

We start by adding the HTML needed to power the form:

<template>
  <form>
    <input
      type="text"
      placeholder="GitHub username"
      required
    />
    <button type="submit">Add card</button>
  </form>
</template>

When the user presses the “Add card” button, we need to perform something. We intercept the submit event on the form tag: <form @submit.prevent="addUser">. We use .prevent to and we add a script portion to the Single File Component with the addUser method. This is the code that will be called when the button is clicked:

<template>
  <form @submit.prevent="addUser">
    <input
      type="text"
      placeholder="GitHub username"
      required
    />
    <button type="submit">Add card</button>
  </form>
</template>

<script>
export default {
  name: 'Form',
  methods: {
    addUser: function() {
      alert('clicked')
    }
  }
}
</script>

Let’s stop and try this code.

Open the src/App.vue file.

This is the content that Vue CLI created for us:

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'app',
  components: {
    HelloWorld
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Change every appearance of HelloWorld and replace it with Form. In the template, just add <Form />. You can also remove any style from the style tag, and the Vue logo in the template:

<template>
  <div id="app">
    <Form />
  </div>
</template>

<script>
import Form from './components/Form.vue'

export default {
  name: 'app',
  components: {
    Form
  }
}
</script>

This should be good enough to start. If the Vue app is running in the command line, you should already see the changes applied if you open localhost:8080 in the browser:

If you add a value and press the button, the alert we added should appear:

Let’s now make this form do something useful.

First we add a username property to the component data, and we use that as a model.

We first add it to the component JavaScript:

<script>
export default {
  name: 'Form',
  data: function() {
    return {
      username: ''
    }
  },
  methods: {
    addUser: function() {
      alert('clicked')
    }
  }
}
</script>

then we attach it to the input field using the v-model directive:

<template>
  <form @submit.prevent="addUser">
    <input
      type="text"
      v-model="username"
      placeholder="GitHub username"
      required
    />
    <button type="submit">Add card</button>
  </form>
</template>

All this work to be able to access that value in the addUser function. In there, we can reference the value of the data username property using this.username. We must use a regular function (and not an arrow function) to be able to do so, because of the way this is bound.

Let’s edit addUser to alert the username:

<script>
export default {
  name: 'Form',
  data: function() {
    return {
      username: ''
    }
  },
  methods: {
    addUser: function() {
      alert(this.username)
    }
  }
}
</script>

---

Go to the next lesson