Getting Started with the Project

To begin, we need to set up our Vue project using the Vue CLI. To install it, execute the following command with NPM:

npm install -g @vue/cli

Alternatively, for Yarn users, run:

yarn global add @vue/cli

Next, create your project by running:

vue create flashcard

Make sure to choose all the default options during setup. Additionally, we will require the uuid package to generate unique identifiers for our flashcards. To install it, run:

npm i uuid

Building the Flashcard App

Now, let's proceed to construct the flashcard application. Below is a template that outlines the structure:

<template>

<form @submit.prevent="add">

<div>

<label>Question</label>

<input v-model="item.question" />

</div>

<div>

<label>Answer</label>

<input v-model="item.answer" />

</div>

<button type="submit">Submit</button>

</form>

<div v-for="(item, index) of items" :key="item.id">

<b>Question</b>

<p>{{ item.question }}</p>

<b>Answer</b>

<p>{{ item.answer }}</p>

<button @click="deleteItem(index)">Delete</button>

</div>

</template>

<script>

import { v4 as uuidv4 } from "uuid";

export default {

name: "App",

data() {

return {

item: {

question: "",

answer: "",

},

items: [],

};

},

methods: {

add() {

this.items.push({

id: uuidv4(),

...this.item,

});

this.item = {};

},

deleteItem(index) {

this.items.splice(index, 1);

},

},

};

</script>

In this template, we have a form that allows users to input questions and answers. The v-model directive links the input fields to the item.question and item.answer properties, which are reactive.

When the submit button is clicked, it triggers the add method while preventing the default form submission behavior. The v-for directive is used to render each flashcard item from the items array, displaying both the question and answer. A delete button is also included, allowing users to remove a flashcard.

The deleteItem method accepts the index of the item to be deleted and utilizes the splice method to remove it from the array. The key attribute assigns a unique ID to each item for efficient rendering by Vue 3.

The data method initializes the reactive properties, while the add method combines the unique ID with the item details before adding it to the array.

Now, as you type in the fields and click submit, the list of flashcards will be dynamically displayed.

Watch this video to see how to build a complete Vue 3 and Vuex application in just three hours.