Creating Dynamic Tables with Vue.js

Recently I've had to develop a component that would enable users to write quotes and work orders inside our CRM.
The component had to include the following functions:

• ability to enter description, quantity, price, and tax rate
  numbers should be formatted nicely with thousands and decimals separators and currency symbol
• each column’s total and table's totals should be auto calculated
• total tax amount should be displayed automatically in the end
• delivery rate is automatically added to the total and calculated as "grandtotal"
• user obviously has to be able to add and remove rows
• ability to reorder rows

Usually I would create a nice looking HTML table with all the necessary columns in header, then move to the body to make the first (seed) row empty input boxes, maybe with one or two selects. I would then create some buttons for actions (adding and removing rows) and then add the footer, which would have some totals and abilities to enter delivery rate etc.

Let’s break down some of the steps needed to do that in jQuery:

Step 1: I had to create keyDown event listeners on inputs to make entire table responsive to human touch.

Step 2: Programming the calculations. I basically pulled some numbers from the DOM, parsed them to floats, did some math and updated some other values in the DOM to reflect the change, and then set empty floats to return 0s instead of NaNs.
Be careful when you're attaching events to newly created rows after insertion.

Note: I had to decide weather to use underscore.js for templating or use first row as “seed row,” which meant I'd always have to copy the first row DOM in new places and remember to empty all inputs before users can see new rows being inserted.

While this sounds like any other ordinary day in the office (or in my case the living room), I knew there were better ways to approach this. Deep inside, I felt a bit irritated for manually manipulating DOM, normalizing, and calculating data when all I had to do was manipulate The Data (or The Model) and View. This way, the data will update itself accordingly, given that it has enough information to do so.

As you can see from the description, there is a lot of DOM back and forthing and data normalization — an external library like autoNumeric or accounting.js handle formatted fields of currencies nicely.

Since, at the time, I already wanted to learn Angular.js and was looking for a problem to solve with Angular.js, I thought to meself, "why the hell not!: I started reading about Angular but wanted something more lightweight to help me get a hang of it. That was when I looked into Vue.js and saw a great Laravel + Vue.js tutorial at Laracasts. That was when I decided to give Vue.js a try!

I'll let You can see end result here:
codepen

Hint: take a look at how you can simply add and remove rows just by adding or removing rows from Model.

You can see how easy it is to attach events that get applied to each new row as you add them dynamically.

Hope you enjoyed my first blog.

Stay cool but be warm. Happy coding!

This tutorial was originally posted by the author here. This version has been edited for clarity and may appear different from the original post.