Vuetify textarea事件传播异常：回车无响应问题解析

在Vuetify中使用v-menu嵌套包含v-textarea的v-card，且v-card带有v-card-actions时，按下回车无法给textarea添加换行；移除v-card-actions后，回车可实现换行但会直接关闭菜单；给v-textarea添加@keydown.enter.stop=""后，换行和菜单保持打开的功能都恢复正常。想了解该事件传播异常的具体原因。

代码示例 #

<template>
  <v-app>
    <v-container>
      <v-menu v-model="menu" :close-on-content-click="false">
        <template #activator="{ props }">
          <v-btn v-bind="props"> Open </v-btn>
        </template>
        <v-card>
          <v-card-text>
            <v-form>
              <v-textarea label="sample text"></v-textarea>
            </v-form>
          </v-card-text>
          <v-card-actions>
            <v-btn @click="menu = false"> Close</v-btn>
          </v-card-actions>
        </v-card>
      </v-menu>
    </v-container>
  </v-app>
</template>

<script setup>
  import { ref } from 'vue'

  const menu = ref(false)
</script>

事件异常原因分析 #

1. 带v-card-actions时回车无法换行 #

v-card-actions内的按钮会被Vuetify的v-form识别为表单的提交触发元素。当在textarea按下回车时，事件会向上冒泡至v-form，触发表单的默认提交行为——而这个行为会优先拦截textarea的换行逻辑，导致无法正常添加换行。

2. 移除v-card-actions后回车换行但关闭菜单 #

移除v-card-actions后，表单失去了明确的提交按钮，但回车事件仍会向上冒泡到v-menu层级。Vuetify的v-menu默认监听键盘事件，未被阻止的回车事件会被v-menu判定为"确认关闭"的触发信号，因此换行后菜单会直接关闭。

3. 添加@keydown.enter.stop=""后功能恢复正常 #

Vue的stop事件修饰符会阻止事件向上冒泡，这样textarea的回车事件就不会传递到v-form或v-menu层面：既不会触发v-form的提交拦截，也不会触发v-menu的关闭逻辑，最终textarea能正常换行，菜单也保持打开状态。

内容的提问来源于stack exchange，提问作者Chgad