Vue.js workshops

# Build it!

# What are we going to do:

  • Include vuejs from cdn
  • Create the vue instance and map it to the form + test that vue is working
  • Add subscribe method and link it to the form subscribe and prevent
  • Add v-model to link to the email field
  • Add vue instance method and fetch for some real call
  • Display the success message and clean the form data

First things first: open the following link in Chrome browser and look arround : Open CodeSandbox (opens new window)

Don't forget to select Auto Save from File menu on the codesandbox editor.

# Let’s follow some steps:

# 1.Include vuejs from cdn

In order to have vue.js work on a webpage we have to add a reference to vue in the head of the page. For now we just gonna add the script to the head of the index.html

  • Navigate to this codesanbox page: Open workshop (opens new window)
  • Open index.html in the codesandbox editor
  • Navigate to the end of the head tag
  • Just before the ending tag of head add the reference to vue.js cnd
  <!-- production version, optimized for size and speed -->
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>

# 2. Create the vue instance and map it to the form + test that vue is working

  • Before the ending tag of the body there you’ll find the script tag.
  • Inside the script tag add a Vue instance and map it to the form element with the id: signup-form. Inside the vue instance we have to map the el property to #signup-form so that Vue will know what part of the page will control. Once this is done we will add some data that will help with the confirmation message.
new Vue({
    el:"#signup-form",         
    data: function(){
        return {isVisible:false} }      
    });

# 3. Add subscribe method and link it to the form subscribe and prevent

In order to make Vue take over the form we will have to map the submit action of the form to Vue instance. We will also need to prevent the form from submitting using an event modifier: prevent. Find the form tag and update accordingly.

<form id="signup-form" method="post" action="#" @submit.prevent="submit">

Next add the submit method, that will only console.log, to the Vue instance after the data property as follows:

,methods:{
    submit:function(){ console.log('submitting ....'); }
}

Save the page in codesandbox and test the submit method.

Don't forget to look into the console tab.

# 4. Add v-model to link to the email field

We are going to add the v-model directive that will link the input field for the email with a field in the data property named email and instantiate it with an empty string.

,data: function(){
    return {
        isVisible:false,
        email: ''
    } 
}

Next let’s link the email from the Vue instance with the input field from the form using the v-model directive. Update the input field from the form with the new one:

<input
    type="email"
    name="email"
    id="email"
    placeholder="Email Address"
    required
    v-model="email"
    />

# 5. Add vue instance method and fetch for some real call

Let’s test the new change by updating the submit method from the Vue instance. In order to access the properties defined in the data part of any Vue instance we have to call the property on this :

,methods:{
    submit:function(){ 
        console.log('saving the following email: ', this.email); 
    }
}

Now when you’ll try to submit the form the console will display the updated message that also contains the email from the input field.

Next step is to make a real api call to an backend using the fetch api (opens new window)

Update the submit method with this one that will make a real call:

submit:function(){
    fetch("https://httpbin.org/post",{
      method:"POST",
      body:{email:this.email}
    })
    .then(resp => {
      this.isVisible = true;
      this.email = ""
    })
    .catch(err => console.err("error:", err))
}

Let’s explain what is happening in the submit message: we use fetch api to create a post to the httpbin.org website. This will return a promise and we will display the error if any in the catch method. In the then method we will set the isVisible to true so that we can display a friendly message after the call ended and reinitialize the email field.

# 6. Display the success message and clean the form data.

It is time to display the thank you message on the success of the post action. For this we are going to use the vue class binding.

Replace the span with class message success with the new one:

<span class="message success" :class="{visible:isVisible}">Thank you!</span>

After saving the file give it a try!

After the fetch api is called you'll see to the right of the submit button the Thank you! message.

Congratulations, you made it !!!

This is the end of the coding session for this codelab! Next let's do some deployments.

← Deploy →