Vue.js and Airtable’s Study Guide Template Pt 1

Create, Update and Delete Study Cards using Airtable.

Airtable offers a free, spreadsheet-like database with an easy API and loads of great templates. It’s perfect for building practice apps.

I can’t quite recall how I came across Airtable, but it struck me as a cool tool that would allow me to quickly build out some interesting apps.

Airtable provides numerous templates, and I chose the Study Guide Template for its simplicity. You will get exposed to saving a text field, a textarea field and a checkbox field. Though the template allows for the uploading of attachments, we’ll save that for another project.

A quick look at what you’ll learn:

  • v-on:change / @change event
  • v-for and :key
  • v-bind / :
  • Using Axios to get, post, put and delete records.
  • Computed properties and how they relate to data properties.

What I left out:

I decided to not use a form element for creating a new card. I want to save this for another version of the project since that will involve getting into required fields and probably some validation. I wanted to keep things simple for this iteration.

Resources

Getting Started

  1. Create an Airtable account and start a new project using the Study Guide template.
  2. Visit the Github repo to clone or download the code. Don’t forget NPM install.
  3. Open main.js and begin reading.

I have added steps to main.js which correspond to some explanations below. Read through the code and the matching explanations to get a better understanding of how everything works before moving onto the challenges.

Change the env.sample.js to env.js and put your API key here. You get your API key in the API documentation.

Airtable API Docs

When you’re in your Study Guide project click the “?” question mark icon at the top-right of the screen. You’ll see an option there for the API docs. From the documentation page you just opened, you’ll see My Study Cards Table in the left menu. There is where you’ll find specific examples of how to interact with your table.

To get your API key click on ‘My Study Cards Table’ > List Records > Show API Key (top-right)

Once you check the ‘Show API Key’ option, you’ll see your key in the ‘example request’ under the CURL tab.

I just used the examples in the CURL tab.

There are examples for using node.js and a lot more on the page, but we won’t concern ourselves with that in this project.

Step 1: Fetch Records / Cards

Using the Created life cycle hook I can fire off a request for our table records on starting up the app.

Airtable provides a number of ways to fetch records. I simply used what was provided in the example, which included a query param to limit the number of records returned. At the time of this writing the limit was only 3, so I increased it to 20 to give us more to play with.

?maxRecords=20

After a simple check to make sure we have the data we want, we save the records to ‘this.studyCards’, our array on the ‘data’ property.

Step 2: Saving a New Study Card

To save a card to the table we use axios.post().

We check to make sure both the ‘name’ and ‘note’ field have some content before we save.

Once we’ve verified we have some data, we create the payload object and then post it to the table.

With a successful post, the table returns the object we just posted, and we can push that onto the end of our studyCards array to update our view.

Computed Properties

Computed properties are very useful. They will change automatically whenever their ‘reactive dependencies’ change. Read more here.

In our project the reactive dependency is the studyCards array. See how the memorizedCards and unMemorizedCards functions return an array filtered from this.studyCards?

memorizedCards() {
    return this.studyCards.filter((card) => {
        return card.fields.Memorized
    })
}

When we update our studyCards array by adding another card, our two computed Properties memorizedCards and unMemorizedCards update automatically.

As mentioned in the guide, the same could be accomplished using methods, but then we’d lose out on the caching of computed properties.

Clearing the Input Fields

After successfully posting the new study card to the table, I clear the input fields by resetting their value to an empty string.

Unfortunately, I also have to manually remove a class that Material Lite places on the inputs to hide their placeholder text.

Step 3: Memorizing and Unmemorizing Study Cards

To update a card we’re using axios.put().

I knew what payload to send by reading the Airtable API docs. The documentation told me I needed to send an object with a single property, ‘fields’, with my study card data.

    const payload = {
        fields: studyCard.fields
    }

My updateCardStatus() function took the studyCard object as an argument, so I was able to use the object to build my payload object and to get the studyCard.id required to make the PUT request.

After a successful update, I get the updated object back from the server. I check my studyCards array for the studyCard object I just updated and then replace it with the updated data.

Once again I’m altering this.studyCards, so my computed properties will update automatically.

Delete a Study Card

To delete a study card I only require the id. I pass this into the function from the index.html.

After checking to see if my DELETE request was successful I once again filter my studyCards array to remove the deleted card. Once again my computed properties update automatically because I changed this.studyCards array.

Learn From My Mistakes

One of the interesting mistakes I made was in using an improper ID for my checkboxes.

Here is how I originally did my v-for with checkboxes:

<li v-for="record in memorizedCards" :key="record.id">
    <label :for="record.fields.Name" class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect">
        <input 
        type="checkbox" 
        :id="record.fields.Name" 
        class="mdl-checkbox__input"  v-model="record.fields.Memorized"
        @change="updateCardStatus(record)">
        <span class="mdl-checkbox__label">{{ record.fields.Name }}</span>
    </label>
</li>

See a problem?

I bind to the label’s ‘for’ attribute using the shorthand for v-bind, and I do the same for the input’s id.

My mistake was not giving the for / id a unique identifier; I used the card NAME as an identifier and I noticed my error when I attempted to update two cards with the same name. The problem was solved when I used the ‘record.id’ instead, as the ‘id’ property is guaranteed to be unique.

Challenges

After you have read through the code and feel you have a good grasp on what’s going on, try the following challenges:

  1. Look at the API docs and see if you can figure out a way to update a studyCard’s name or note content.
  2. Create a new field in Airtable to store another piece of data about the studyCard and add that information to the project.
  3. Implement a ‘clone’ method that would allow a user to duplicate any of the studyCards. Of course the cloned card would need to be a unique entry in your table.
  4. Try another template from Airtable that looks interesting.

The next project I post here will show how I tackled these challenges.