I can’t stop doing things with Vue.js. Today I voted for Udemy courses with a small project.

How to Build a Simple VueJS Project in 1 Hour

A Small Voting Project with Vue.js in Just One Hour

Hi, today I made a voting page with Vue.js 3. I will share it with you. This page will be a small space for my own project.

Here I will get the data on the page from a JSON file that I created locally.

Here is my example data inside the data.json file.

Let’s import the data we created into script tags. And then we need to import ref . After we created data and ref , we need to create an object both using. This will name is data .

I’m creating another object for the star numbers. I chose to evaluate out of 10 stars for voting. This name is countNull , and when creating, I used ref . Because if I didn’t use it, my object value would be NaN . This is an important point. I need to define the dataand countNull created in return.

<script>

import Data from “../data/data”;

import { ref } from “vue”;

export default {

   setup() {

      const data = ref(Data);

      const countNull = ref(10);

      return {

         data,

         countNull,

}; }, };

</script>

If I didn’t these steps, I would show the warning as;

runtime-core.esm-bundler.js?5c40:6875 [Vue warn]: Property “countNull” was accessed during render but is not defined on instance. 

That’s all we will do in the scriptwith data.

This is my template part,

The area is inside h4 tags. With the:hovereffect becomes the following.

I did this part in v-forloops. First, I created an object v-for from the dataI created. This name is datas .

For example, I gave 6 points to course A. These stars will be yellow. I have 4 stars left, and I chose a tone close to white for these stars.

For the stars, I used twov-for again. The first loop is the number of votes I got from the JSON file. The second loop is for the number of stars to complete it to 10.

I did the parts here using Property Binding. Like as{{....}} .

The completed state is as follows.

Lets’s doing styles. Mystyle is,

course and svg inside _row . This splits the page in two. I don’t know if I will use the icon on the right. I used it to split the page in half. I used flex-basis to separate the two builds.

For flex-basis the value I prefer is a 60% — 40% rate.

With the :hoverthe effect, the field expands to the right, and stars appear.

Thanks.

If you get used to Vue.js, you won’t be able to quit.

It really is one of the best things.

Beste.

Learn More