In the previous step, we started working on the UserForm component. In this step, we’ll continue to work on it by adding input validation, and emitting an event to the parent (rootComponent) when a user has been updated.

Update the handleSubmit method in the UserForm component to look like this:

handleSubmit(){
if (this.validate()) {
this.$emit("user-edited", this.user);
}
}

In the previous step, we created the UserList component. In this step, we’ll add a component that allows you to view and edit the details of a user. We’ll also see one of the pitfalls that many people run into when learning Vue, which is that you should never mutate a prop.

Add this component, just after the UserList component:


In the previous step of this tutorial, we quickly set up the files for our user manager app. In this step we’ll create a component that displays a list of all the users in our data set. Make sure to put the following code after the Vue app is created, but before it is mounted. Note that in the previous step I placed a comment to mark the spot (if you aren’t sure where to place the following code samples, scroll down to the bottom of the page, I’ve included the finished main.js file for your convenience:).

Here’s the code…


This series of tutorials will cover some of the things that can trip you up when learning Vue. It is best suited for someone who has already dabbled with Vue a bit, but maybe not yet built a complete app. I won’t dig deep into all the fundamental concepts, instead I’ll focus primarily on some of the things that can trip you up as you are learning Vue. If you’ve never worked with Vue before, then I suggest you watch this excellent free course to help you get started. You should also be comfortable with ES6 Syntax.

Create a folder…


One of the stumbling blocks I ran into while learning Vue was in deciding whether to store information as a prop or a data member when building a component. I had read that you should use a prop if you need to pass information from a parent component to a child component. And that you should use a data member for information that the component uses internally. But I quickly discovered that I had information that fit both use cases.

For example, assume that you have a component that allows you to edit a product, and that the product to…


This tutorial assumes that you’ve never done any programming. It’s the first lesson in a course I’ve created for learning web development. Follow along with the video below to create a very simple HTML page, and then read the article for further explanation. The video was made on Windows, if you are a Mac user then you may need to make some slight adjustments (for example you might use Text Wrangler instead of Notepad).


In the previous article, I explained the basics of HTTP including client requests and server responses. In this article, we’ll dig into it in greater detail.

Request Methods

There are different types of requests, which are known as request methods. The most common request method is GET, which a client will use to fetch a resource from a web server. But a client may also want to send data to a server, edit data on the server, or even delete data from a server. There is a request method for each of these actions:

  • GET — The client is requesting…

When you use your browser to look at a web page, there’s quite a bit happening under the hood in order to make the page appear. All the files needed to display the page must be transferred from the web server to your computer. These files include the HTML page itself, and all the images (and other media) that are displayed. The means by which these files are transferred from the server to your computer is HTTP.

HTTP is the protocol of the web. It is the way in which web servers and web clients (usually browsers) communicate with one…

Niall Kader

Web developer and instructor of technology at Western Technical College

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store