Support Online
MirrorLooking Glass
GenixNodeGenixNode
Client Panel
Skip to main content

Vue.js Event Management: How to Create User Interactions?

What will you learn in this guide?​

In this guide, you will learn how to create user interactions with the Vue.js event system.
The goal is to develop an interactive admin panel with clicks and custom events.

In the example scenario, a Server Management Panel is prepared.

🧠 Technical Summary​

This guide explains Vue.js event management.
Problem: Controlling user interactions.
Solution: Use v-on, modifier and $emit.

Prerequisites​

  • Node.js v14+ must be installed
  • Vue CLI must be installed
  • Must know the basics of HTML, CSS and JavaScript

1️⃣ Preparing the Project and Data Structure​

Create Vue 3 based project.

vue create genixnode-sunucu-paneli
  • This command creates project with Vue 3 configuration.
  • Define server data.
export default [
  { id: 1, isim: 'İstanbul-Node-01', lokasyon: 'Türkiye', durum: 'Aktif' },
  { id: 2, isim: 'Amsterdam-VDS-04', lokasyon: 'Hollanda', durum: 'Aktif' }
]
  • This data simulates GenixNode data centers.

2️⃣ Creating a Server Blade Component​

<template>
  <div class="sunucu-karti">
    <h3>{{ sunucu.isim }}</h3>
    <p>Lokasyon: {{ sunucu.lokasyon }}</p>
    <small>Durum: {{ sunucu.durum }}</small>
  </div>
</template>

<script>
export default {
  props: {
    sunucu: { type: Object, required: true }
  }
}
</script>
  • This component receives data via prop.

3️⃣ Event Listening with v-on​

<div class="sunucu-karti" @click="sunucuSec(sunucu.isim)">
  • This code catches the click event.
function sunucuSec(isim) {
  alert(`$&#123;isim&#125; inceleniyor.`)
}
  • This function gives feedback to the user.

4️⃣ Using Event Modifier​

One-Time Operation​

@click.once="sunucuSec(sunucu.isim)"
  • Event works only on first click.

Key Combination​

@click.shift="sunucuSec(sunucu.isim)"
  • Event only works with Shift + Click.

5️⃣ Custom Event ($emit) Usage​

  1. Send data from child component to parent.
@click="$emit('favoriEkle', sunucu)"
  • This code triggers a special event.

6️⃣ Event Capture in Parent Component​

<sunucu-karti
  :sunucu="item"
  @favoriEkle="listeyeEkle"
/>
function listeyeEkle(sunucu) {
  if (!favoriler.value.includes(sunucu)) {
    favoriler.value.push(sunucu)
  }
}
  • This action updates the favorites list.

❓ Frequently Asked Questions (FAQ)​

1. Is there a difference between @ and v-on? No. @click is short for v-on:click.

2. Can more than one data be sent with $emit? Yes. Parameters can be passed with commas.

3. What does .prevent do? Prevents default HTML behavior.

🎯 Result​

In this guide, you learned Vue.js event management. You created an interactive structure using modifiers and custom events.

You can safely run your projects on the GenixNode infrastructure. Servers as fast as your codes are waiting for you 🚀