如何防止事件传播到父元素？ @input.stop 不起作用。 (NuxtJS)

Question

我在 vuetify 扩展面板中内置了一个文本字段。

点击“重命名框”图标后

问题是每次我在文本框中输入空格键时，扩展面板都会切换。我已经通过使用 click.stop="" 属性阻止了点击的事件传播，但我似乎无法阻止此空格键事件影响父级。

我测试过的属性是：

1. keydown.stop
2. keydown.prevent（'不能用这个选项输入'）
3. keydown.self
4. keydown.capture
5. input.stop
6. change.stop

以下是根据vue插件发出的事件

这里是代码

<v-expansion-panel
active
v-for="(item, i) in $store.state.data"
:key="i"
>
<v-expansion-panel-header>
  <div v-if="editorQ !== i">Q. {{ item.q }}</div>
  <v-text-field
    v-else
    label="Question"
    :value="newQuestion"
    @click.stop=""
    @change.stop="updateQ"
    @keydown.stop=""
  ></v-text-field>
  <template v-slot:actions>
    <v-btn
      v-if="editorQ === i"
      @click.stop="doneEditingQuestion(i)"
      depressed
      icon
      text
    >
      <v-icon> mdi-check </v-icon>
    </v-btn>
    <v-btn
      class="upright"
      v-else
      @click.stop="editQuestion(i)"
      depressed
      icon
      text
    >
      <v-icon> mdi-rename-box </v-icon>
    </v-btn>
  </template>
</v-expansion-panel-header>
<v-expansion-panel-content>

Answer 1

这对我来说只是反复试验，以下内容阻止了active 切换：

@click.stop
@keyup.prevent

当应用于v-expansion-panel-header 中的v-text-field 时。

Codepen