Copy

<script setup lang="ts">
import type { HoneypotEvent } from "src/types";

const props = defineProps<{
  evt: HoneypotEvent;
}>();

const emit = defineEmits<{
  "field-click": [event: MouseEvent, key: string, value: string];
}>();
</script>

<template>
  <button
    v-if="evt.fields?.opcode"
    @click="emit('field-click', $event, 'opcode', evt.fields.opcode as string)"
  >
    <span>Opcode:</span>
    {{ evt.fields.opcode }}
  </button>
  <button
    v-if="evt.fields?.qtype"
    @click="emit('field-click', $event, 'qtype', evt.fields.qtype as string)"
  >
    <span>QType:</span>
    {{ evt.fields.qtype }}
  </button>
  <button
    v-if="evt.fields?.qname"
    @click="emit('field-click', $event, 'qname', evt.fields.qname as string)"
  >
    <span>Domain:</span>
    {{ evt.fields.qname }}
  </button>
</template>