#vuejs firebase tutorial | Explore Tumblr posts and blogs

mancdev · 7 years ago

Text

VueJS & Firestore Stripped-Back - Tutorial Part 4

In this tutorial series we are stripping everything back to basics to explain how to build full-stack web applications with VueJS and Firebase Cloud Firestore - no CLIs, NPM or Webpack - just a html page and a code editor.

Updating your data

Welcome back. In this fourth part of our Stripped-Back tutorial we’re going to be explaining the U in CRUD - Updating data. By the way if you haven’t read the previous parts of this tutorial please feel free to do so using these links : Part 1, Part 2, Part 3

In the previous part of the tutorial we retrieved the data from our Firestore database by running a realtime query and populating an employees array with the data we retrieved including all of the fields such as lastName, jobTitle etc. However to be able to update (and indeed delete for that matter) we need to be able to get a handle on a unique ID for each employee document that is retrieved so we’ll know what to update when the user saves a change. If you remember from part 2, when you were checking your Firestore console, we mentioned a strange looking ID attached to each document in the Employees collection - this is what we’ll need to get hold of.

To do this we’ll first need to setup a place to store a unique id, so we’ll add an Id property to our employee object in the data section of our Vue Instance Object :

var app = new Vue({ el : ’#app’, data : { appTitle : ‘EmployeeMagic’, mainStyle : { ‘margin’ : ’20px’ }, employee : {firstName : ‘’, lastName : ‘’, jobTitle : ‘’, dept : ‘’, age : 0, id : ‘’ }, db : {}, employees : [ ] },

Next we’ll need to go back and change our callback function which gets the data from each document and puts it into our employees array. In there we’ll need to make sure the unique id from each document is stored in the employee’s new id property as well as the other fields.

created : function() { let that = this that.db = firebase.firestore() let query = that.db.collection(’Employees’) .orderBy(’lastName’) query.onSnapshot((snapshot) => { that.employees = [ ] snapshot.forEach((doc) => { that.employees.push({ id : doc.id, firstName : doc.data().firstName, lastName : doc.data().lastName, jobTitle : doc.data().jobTitle, dept : doc.data().dept, age : doc.data().age }) }) }) }

Notice we didn’t need to go through the data() method to get our id, it’s available directly on the document object itself. On our template, we’ll add an Edit button into the table alongside each employee so the end-user can click the Edit button next to the employee they want to update. We’ll add the button inside the Age column.

<table class=“table table-bordered table-striped”> <thead> <th>Name</th> <th>Job Title</th> <th>Department</th> <th>Age</th> </thead>

<tbody> <tr v-for=“employee in employees”> <td>{{ employee.firstName }} {{ employee.lastName }}</td> <td>{{ employee.jobTitle }}</td> <td>{{ employee.dept }}</td> <td>{{ employee.age }} <button class="badge badge-primary">Edit</button> </td> </tr> </tbody> </table>

We obviously need to have a click event handler on the new Edit button but each button needs a reference to the employee it represents in order to know which one has been selected to be edited. Vue offers a way to deal with this by allowing a second parameter in the v-for directive. This second parameter can be used to expose the index of the array element that v-for is iterating over so we can reference it elsewhere, in this case we want to pass it as the parameter for our click event handler so the function we call knows the index of the employee it’s dealing with.

We can now assign our click handler to our Edit button and pass in the index of each employee, using the idx that we exposed from v-for, as the parameter. We explained the v-on:click directive in part 2 (remember you can also use the shorthand @click if you’d like).

The next step is to implement the editEmployee() click handler which we can do by adding it to the methods object in our Vue Instance. Remember we’re implementing all of our methods in our Vue Instance as arrow functions.

methods : { saveEmployee : () => { if ((app.employee.firstName) && (app.employee.lastName)) app.db.collection(‘Employees’).add(app.employee) .then(function() { app.clearEmployee() }) .catch(function() { console.log(‘Error saving employee ‘ + app.employee.firstName + ‘ ‘ + app.employee.lastName) }) else alert(‘You must enter both a first and last name to save.’) }, editEmployee : (idx) => { }, clearEmployee : () => { app.employee = { firstName : ‘’, lastName : ‘’, jobTitle : ‘’, dept : ‘’, age : 0 } } },

The job of the editEmployee function is to grab the selected employee’s information and populate the employee object’s properties from the correct element on the employees array. We can determine which employee in our array to use by referencing the idx parameter passed to the function from the button. Once our employee object is populated, Vue’s data binding takes care of the rest to display it on the page.

editEmployee : (idx) => { let emp = app.employees[idx] if (emp) { app.employee = { id : emp.id, firstName : emp.firstName, lastName : emp.lastName, jobTitle : emp.jobTitle, dept : emp.dept, age : emp.age } } },

Save the changes and refresh the browser and make sure everything is working as it should. You should see a blue Edit button in the Age column of the table and when you click it, that employee’s information should be displayed in the input boxes. We now need to handle saving updates to existing records when the user clicks Save rather than simply adding it as new record as it does now. We’ll keep the same Save button and the same saveEmployee click handler method, however we’ll make a decision as to whether we need to save as a new employee or as an update to an existing employee. The way to determine this is quite straightforward, if the employee object has a value in it’s id property it’s an existing record, otherwise it’s a new record. For this to work we need to make a quick change first to the clearEmployee method and ensure it clears the id property as well.

clearEmployee : () => { app.employee = { firstName : ‘’, lastName : ‘’, jobTitle : ‘’, dept : ‘’, age : 0, id : ‘’ } }

Let’s go to our saveEmployee method and add that condition to determine whether we’re saving a new employee or an existing one. For saving new employees we simply need to check if the employee.id isn’t set. Note that rather than simply save the employee object as we did previously, we’re defining a new object from the information in the employee object. The reason for this is simply that we’ve added an id property to the employee object and we don’t want to save this as an additional field on the document

saveEmployee : () => { if ((app.employee.firstName) && (app.employee.lastName)) { let saveEmp = { firstName : employee.firstName, lastName : employee.lastName, jobTitle : employee.jobTitle, dept : employee.dept, age : employee.age } if (! app.employee.id) //check if the id has not been set app.db.collection(‘Employees’).add(saveEmp) .then(() => { app.clearEmployee() }) .catch(() => { console.log(‘Error saving employee ‘ + app.employee.firstName + ‘ ‘ + app.employee.lastName) }) else { } //if the id has been set } else alert(‘You must enter both a first and last name to save.’) },

Now let’s see how to save an update to an existing employee. First of all we need to grab an object reference to the specific document we want to update and we get this using the id of the employee.

let docRef = app.db.collection('Employees').doc(app.employee.id)

Now we’ve got a reference to the specific document in our Employees collection in Firestore, we can just simply call Firestore’s set() method and pass in the object with our updated information and our employee record will be updated.

if (docRef) docRef.set(saveEmp)

The set() method is asynchronous, like most Firestore methods, so if there’s any code we want to execute once we’re certain that the update has saved, we can implement it in the returned promise’s then() method (as we covered in part 2). In the method we pass to then() we simply call clearEmployee to clear the inputs and make it ready to add a new employee again, just as we did when adding new employees (and we’ll add a catch() just in case).

if (docRef) docRef.set(saveEmp) .then(() => { app.clearEmployee() }) .catch(() => { console.log(’Update to ‘ + app.firstName + ' ' + app.lastName + ' did not save!'); })

So let’s put this all together in our saveEmployee method :

saveEmployee : () => { if ((app.employee.firstName) && (app.employee.lastName)) { let saveEmp = { firstName : app.employee.firstName, lastName : app.employee.lastName, jobTitle : app.employee.jobTitle, dept : app.employee.dept, age : app.employee.age } if (! app.employee.id) //check if the id has not been set app.db.collection(‘Employees’).add(saveEmp) .then(() => { app.clearEmployee() }) .catch(() => { console.log(‘Error saving employee ‘ + app.employee.firstName + ‘ ‘ + app.employee.lastName) }) else { //if the id has been set, we save an update let docRef = app.db.collection('Employees').doc(app.employee.id) if (docRef) docRef.set(saveEmp) .then(() => { app.clearEmployee() }) .catch(() => { console.log(’Error updating employee ‘ + app.firstName + ' ' + app.lastName) }) } } else alert(‘You must enter both a first and last name to save.’) },

This is fairly verbose and we could certainly tidy things up but it works and it’s verbosity helps to explain what it is we’re doing so we’ll leave this as it is. Before we close this part of the tutorial off and let you go and get a much deserved coffee, let’s add one more little piece of functionality to our app. Things are great, but let’s say the user clicks to Edit an employee and realises they don’t want to save - at the moment there’s no way for them to go back to add a new one. To get around this we’ll put an Add button next to the Save button that let’s them click to add a new employee. This button however should only be available if they’re editing an existing employee.

Notice we’re directly calling our clearEmployee method as our event handler as that does everything we need to put our app into Add mode. Cool, but remember we only want to show this button if the user is in Edit mode. The way to do this is to use Vue’s conditional directive, v-if. This lets us include a conditional statement on the element, whether directly of via a method call, to determine if it should be visible on the page. In this case we want to check if the current employee object has an id set, if it has then we’re in edit mode so show the Add button, otherwise don’t show it.

That’ll do for this part of the tutorial dedicated to the U in CRUD. In this part we’ve covered retrieving each document’s unique id along with the other fields. We’ve added an Edit button for each employee in the list and exposed an index from our v-for directive to assign an employee index from our array so each button knows which employee it relates to. We‘ve saved our employee updates back to the database using the unique id of each document and finally we covered using v-if to conditionally show a button on our page. In the next part of this tutorial we’ll cover the D in CRUD - deleting. Hope you can join me.

You can download the completed code for this part of the tutorial on Github using the repo below and select the part4 folder. https://github.com/MancDev/VueFire

1 note · View note

rafi1228 · 5 years ago

Link

Learn Vue JS & Firebase by creating & deploying dynamic web apps (including Authentication).

What you’ll learn

Get in-depth knowledge of Vue JS & Firebase from the ground up

Build & deploy 3 real-world web apps with Vue JS & Firebase

Learn about & implement Firebase authentication into Vue JS web apps

Use other Firebase services such as a Firestore database, Cloud Functions & Hosting

Requirements

A basic understanding of HTML, CSS & JavaScript

ES6 Knowledge is advantageous

An appreciation of AJAX is a plus but not essential

Description

If you’re looking to get started building full-stack applications with Vue JS and Firebase, then look no further. In this course I’ll take you from novice to ninja in Vue JS, starting out with the very basics of VueJS and then moving on towards creating fully-fledged VueJS applications.

We’ll spend a whole chapter learning about the Vue Router – and how to create SPA’s (single page applications) using it – as well as exploring how to use the Vue CLI to get up and running quickly when creating Vue applications.

I’ll also teach you how to use Firebase, an online, free service provided by Google which acts as a very feature-rich, fully-fledged back-end to our applications. We’ll learn how to use Firebase to store and retrieve data to and from a NoSQL database called Firestore, as well as authenticate our app’s users with the Firebase Auth service, We’ll also take a peak at Firebase Cloud Functions (which allow us to run server-side JavaScript code in a Node.js environment), as well as deploying all of our applications to Firebase hosting.

There’s a crazy amount to cover, but by the end of this course you’ll be in a position to create full-stack web applications (complete with user authentication) using Vue JS and Firebase!

I’m also know as The Net Ninja on YouTube

…With around 200,000 subscribers and nearly 1000 free web development tutorials. So feel free to check out my teaching style and reviews before you buy my course :).

This course is built with Vue 2.x, and will be added to with extra sections in the future.

Who this course is for:

Anyone who wants to learn how to create apps with Vue & Firebase

Anyone who wants to learn Vue and Firebase

Anyone who wants to learn about Authentication in Vue apps

Anyone who wants to learn Vue JS from the ground up

Anyone who wants to learn how to use Firebase in their applications

Created by Shaun Pelling Last updated 10/2018 English English [Auto-generated]

Size: 4.73 GB

Download Now

https://ift.tt/2GaTPYb.

The post Build Web Apps with Vue JS 2 & Firebase appeared first on Free Course Lab.

#IFTTT #Blogger

0 notes