Penanganan Acara di Vue.js: Sintaks dan Contoh

Menangani event adalah bagian penting dalam berinteraksi dengan pengguna dan mengubah status aplikasi di Vue.js. Vue.js menyediakan berbagai cara untuk menangani event, termasuk event handler inline, metode, dan pengubah event.

Berikut adalah beberapa kejadian umum di Vue.js

1. click acara

Peristiwa ini dipicu saat elemen yang dapat diklik, seperti tombol atau tautan, diklik. Biasanya digunakan untuk melakukan tindakan atau fungsi pemicu saat pengguna berinteraksi dengan elemen.

<button v-on:click="handleClick">Click me</button>

methods: {  
  handleClick() {  
    console.log('Button clicked!');  
  }  
}

2. input acara

Acara ini dipicu ketika nilai elemen input berubah. Biasanya digunakan dengan v-model direktif untuk mengikat input nilai ke properti data dalam komponen Vue. Ini memungkinkan Anda memperbarui dan melacak perubahan nilai secara reaktif input.

<input v-model="message" v-on:input="handleInput" />

data() {  
  return {  
    message: ''  
  };  
},  
methods: {  
  handleInput() {  
    console.log('Input value:', this.message);  
  }  
}

3. change acara

Acara ini dipicu ketika nilai elemen formulir, seperti pilih dropdown atau kotak centang, diubah. Biasanya digunakan untuk melakukan tindakan atau memperbarui data berdasarkan opsi yang dipilih atau status elemen yang diperiksa.

<select v-model="selectedOption" v-on:change="handleSelectChange">  
  <option value="option1">Option 1</option>  
  <option value="option2">Option 2</option>  
</select>

data() {  
  return {  
    selectedOption: ''  
  };  
},  
methods: {  
  handleSelectChange() {  
    console.log('Selected option:', this.selectedOption);  
  }  
}

4. submit acara

Acara ini dipicu saat formulir dikirimkan, baik dengan mengklik submit tombol atau menekan Enter di dalam input bidang. Biasanya digunakan untuk menangani pengiriman formulir, memvalidasi pengguna input, dan melakukan tindakan seperti membuat permintaan API atau menyimpan data.

<form v-on:submit="handleSubmit">  
  <input type="text" v-model="name" />  
  <button type="submit">Submit</button>  
</form>

data() {  
  return {  
    name: ''  
  };  
},  
methods: {  
  handleSubmit(event) {  
    event.preventDefault();  
    console.log('Form submitted! Name:', this.name);  
  }  
}

5. keyup acara

Acara ini dipicu ketika tombol dilepaskan setelah ditekan. Biasanya digunakan untuk melakukan tindakan sebagai respons terhadap keyboard input, seperti memfilter daftar item atau memicu fungsi pencarian.

<input v-model="message" v-on:keyup="handleKeyUp" />

data() {  
  return {  
    message: ''  
  };  
},  
methods: {  
  handleKeyUp() {  
    console.log('Key up event triggered!');  
  }  
}

6. keydown acara

Acara ini dipicu ketika tombol ditekan. Biasanya digunakan untuk mendengarkan kombinasi tombol tertentu atau melakukan tindakan saat tombol ditekan, seperti menavigasi tayangan slide atau mengontrol permainan.

<input v-model="message" v-on:keydown="handleKeyDown" />

data() {  
  return {  
    message: ''  
  };  
},  
methods: {  
  handleKeyDown() {  
    console.log('Key down event triggered!');  
  }  
}

7. mouseover acara

Acara ini dipicu ketika pointer mouse dipindahkan ke elemen. Biasanya digunakan untuk menampilkan informasi tambahan atau memberikan umpan balik visual saat mengarahkan kursor ke suatu elemen.

<div v-on:mouseover="handleMouseOver">Hover over me</div>

methods: {  
  handleMouseOver() {  
    console.log('Mouse over event triggered!');  
  }  
}

8. mouseout acara

Acara ini dipicu ketika pointer mouse dipindahkan dari elemen. Ini biasanya digunakan untuk menyembunyikan atau memodifikasi elemen saat mouse tidak lagi mengarahkannya.

<div v-on:mouseout="handleMouseOut">Move mouse out</div>

methods: {  
  handleMouseOut() {  
    console.log('Mouse out event triggered!');  
  }  
}

9. scroll acara

Acara ini dipicu saat elemen digulir. Biasanya digunakan untuk mengimplementasikan fitur seperti pengguliran tak terbatas, pemuatan konten yang lambat, atau memperbarui elemen UI berdasarkan posisi scroll.

<div v-on:scroll="handleScroll">Scroll me</div>

methods: {  
  handleScroll() {  
    console.log('Scroll event triggered!');  
  }  
}

10. focus acara

Peristiwa ini dipicu saat elemen menerima focus, biasanya saat diklik atau saat pengguna menavigasi ke sana menggunakan keyboard. Ini biasanya digunakan untuk melakukan tindakan atau memberikan umpan balik visual saat input elemen atau memperoleh focus.

<input v-on:focus="handleFocus" />

methods: {  
  handleFocus() {  
    console.log('Input focused!');  
  }  
}

Ini hanyalah beberapa contoh dasar event di Vue.js. Anda dapat menyesuaikan fungsi penanganan acara agar sesuai dengan kebutuhan khusus proyek Anda.