keyup.enter 触发了其他事件(非父级元素)怎么破?

img


    <!--操作按钮-->
    <v-card-actions>
      <v-spacer></v-spacer>
      <v-btn
        color="blue darken-1"
        text
        @click="dialogDate = false"
      >
        Close
      </v-btn>
      <v-btn
        color="blue darken-1"
        text
        @click="clickSave"
        @keyup.enter="clickSave"
      >
        Save
      </v-btn>
    </v-card-actions>
  </v-card>
</v-dialog>

========================

<div class="static" @click="showDateTime" @keyup.enter="showDateTime" v-show="client!='NatWest'">
          <img src="@/assets/images/map/calendar_blue.png" class="calendar" tabindex="3"/>
          <div class="static_title">Custom <br/> Timeframe</div>
        </div>

=============================

需求:现在有个需求是要用键盘操作界面,左边这个”Custom TimeFrame“回车后会弹出右侧的日期选择弹窗。

问题:save回车后弹窗消失后会再次出现。

前提:clickSave这个方法会把dialogDate = false隐藏弹窗,showDateTime这个方法会把dialogDate = true显示弹窗

原因:save回车后会触发showDateTime这个方法,但是他们又不是父子关系,一个是dialog,另一个是页面上一个图片,为什么会触发到?然后我尝试把
@click="clickSave"去掉,问题就不会出现了,但也是莫名其妙。 然后网上一堆keyup.enter prevent self stop都试过都不行,不知道为什么会出现这样奇怪的问题。

有没有了解的,感觉这个现象很奇怪啊