Vue-də dinamik hadisə adları

[codex]

Vue-da dinamik hadisə adlarından istifadə edə biləcəyinizi bilirdinizmi? Hadisə dinləyicilərini “hard code” əvəzinə, onları hesablanmış hadisə adları ilə v-on (@) istifadə edərək dinamik şəkildə bağlaya bilərsiniz:

<script setup lang="ts">
import { computed, ref } from 'vue';

const event = ref<'mouseover' | 'click'>('mouseover');

const eventHistory = ref<Array<string>>([]);

const buttonLabel = computed(() =>
  event.value === 'mouseover' ? 'Hover Me' : 'Click Me'
);

const onHandleEvent = () => {
  eventHistory.value = [
    ...eventHistory.value,
    `${new Date().toISOString()}: ${event.value}`,
  ];
};
</script>

<template>
  <div class="wrapper">
    <div class="wrapper">
      <span>Select an event type: </span>
      <div>
        <label>
          <input type="radio" name="event" v-model="event" value="mouseover" />
          On Hover
        </label>

        <label>
          <input type="radio" name="event" v-model="event" value="click" />
          On Click
        </label>
      </div>
    </div>
    <button @[event]="onHandleEvent">{{ buttonLabel }}</button>
    <div class="wrapper" v-if="eventHistory.length > 0">
      <strong>Event History:</strong>
      <span v-for="entry of eventHistory">{{ entry }}</span>
    </div>
  </div>
</template>

<style scoped>
.wrapper {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
</style>

Demo

Vue Tip: Dynamic Event Names - StackBlitz

Next generation frontend tooling. It's fast!

StackBlitz (stackblitz.com)