Build a track changes app in minutes

Goal

The goal of this app is to keep track of changes made by users to data in a table. In a list next to the table, we are going to show the previous value, updated value, and cell location of the data that was changed.

You can read along or code along with this post by creating Quasar project. All code used in the video will be at the bottom of this post. Let’s get right to it!

Implementation

This is a simple app consisting of one page (Index.vue) and two UI components (Table.vue and Trail.vue).

When you look at the Code section of this post, you will see 3 files with code. Here’s how it works:

The Index.vue page is mostly just displaying the two components and sharing data.

• It has a listener on the Table component to listen for changes to the table.
• Those changes are then stored in state using the “storeValues” method to push new items to the “values” list variable.
• Since we are sharing data between components we need a mechanism for doing that. The most straight forward way for this app is to use “props”. So we pass the “values” list to the Trail.vue component using the “props” method. In a more complex app you may consider using Vuex to manage stores of data.

The Table.vue file is where most of the work is done.

• This file contains a table which users can edit by clicking cells. I explained how to create this table in a previous post so feel free to check it out if you’re interested.
• The key to tracking changes on this table is getting the previous and current value of the cell. We do that by using a template slot provided by Quasar which comes with all the information we need (code starts in row 15 of the file).
• We also get the row number and column name from the “props” passed into the template for the body-cell. Quasar also provides the “props” data out-of-the-box.
• Passing the data to the parent component is pretty easy now that we have all the information we need. We are creating an object with keys and values, then using a “storeInput” function which accepts the object and uses the “$emit” method to send that data to the parent (Index.vue).

In the Trail.vue file

• We loop through the list and do a quick transformation on each value so we show numbers in a number format
• Display each item on the browser

Code

Thank you for reading this post, hopefully it contained some useful ideas, code, or concepts for you to apply in your next projects. Give this post a clap and follow me for more useful information. Peace!