Vue.js 输入元素中的vuejs svg元素在单击事件时不响应

在输入元素中，我有一个svg图标，带有链接到方法的

@click

事件。但是点击它什么也不做。尝试了

@click.provent

@click.native

，但也没有成功。将

@click

放在输入元素中，使其在单击输入字段时工作。但是，我只希望在输入字段中的svg图标上触发单击事件。谢谢你的帮助

<input
  class="w-full pl-10 pr-3 py-3 border border-transparent leading-5 bg-gray-600 text-gray-100 placeholder-gray-400 focus:outline-none focus:bg-white focus:text-gray-900 sm:text-md transition duration-150 ease-in-out"
  type="text"
  v-model="search"
  @input="$emit('update:inputData', validatedSearch)"
  @keyup.down="onArrowDown()"
  @keyup.up="onArrowUp()"
/>
<div
  class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none"
>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    v-show="search.length > 0"
    class="h-5 w-5 text-gray-400"
    stroke="currentColor"
    viewBox="0 0 20 20"
    @click="delSearch()"
  >
    <path
      stroke-linecap="round"
      stroke-linejoin="round"
      stroke-width="2"
      d="M6 18L18 6M6 6l12 12"
    />
  </svg>
</div>

---

指针事件tailwindcss中的无类导致该问题，请尝试将其删除：


Vue.config.devtools=false；
Vue.config.productionTip=false；
新Vue({
el:“#应用程序”，
数据（）{
返回{
搜索：“
}
},
方法：{
delSearch（）{
控制台日志（“删除搜索”）；
this.search=“”
}
}
})