---
title: "NUXT_B3014"
description: "服务器组件上的事件监听器"
canonical_url: "https://nuxt.zhcndoc.com/docs/4.x/errors/b3014"
---
# B3014

模板在服务器组件上使用了 `v-on`（或 `@`）或 `v-model`。服务器组件只在服务器端渲染，自身不会发送 JavaScript，因此不会触发事件，也无法更新 `v-model` 绑定。该监听器永远不会被调用。

除非禁用了 [`experimental.templateDiagnostics`](https://nuxt.zhcndoc.com/docs/4.x/guide/going-further/experimental-features#templatediagnostics)，否则会报告此警告。`@error` 不会触发此警告：服务器组件加载失败时会触发 `error`。

## 解决方案

在客户端渲染交互部分。你可以为服务器组件配对一个同名的 `.client.vue` 组件，使用 `nuxt-client` 属性渲染交互式子组件（需启用 `experimental.componentIslands.selectiveClient`），或者将监听器移到包裹服务器组件的客户端组件中。

```vue [app/components/Counter.server.vue]
<template>
  <div>
    <!-- rendered on the server, then hydrated on the client -->
    <CounterButton nuxt-client />
  </div>
</template>
```

::read-more{to="https://nuxt.zhcndoc.com/docs/4.x/guide/concepts/server-components"}
::


## Sitemap

See the full [sitemap](https://nuxt.zhcndoc.com/sitemap.md) for all pages.