使用Vue 3，当有人单击span时，我试图调用handleViewAuditClick方法。
我已经将@click="handleViewAuditClick"事件添加到span文本中，但是单击文本不会调用该方法。
如果我改变它，使文本被包裹在一个div代替工作。虽然我不知道为什么工作。使用div也不是一个好的解决方案，因为它改变了文本是多行，我不想要的。
那么，在单击span文本时如何调用handleViewAuditClick呢？

<template>
  <v-alert-banner design="positive">
    New audit is ready.
    <span @click="handleViewAuditClick">
      Click here to view.
    </span>
  </v-alert-banner>
</template>

<script setup>
import VAlertBanner from 'src/components/VAlertBanner.vue';
const handleViewAuditClick = () => {
  console.log('clicked');
};
</script>

v-alert-banner子组件如下所示：

<template>
  <q-banner dense rounded :class="classValue" class="full-width">
    <template #avatar>
      <q-icon :name="iconNameValue" size="sm" />
    </template>
    <slot></slot>
  </q-banner>
</template>