如何使@key 选项与<v-list> 一起使用？

Question

@keypress、@keydown 和 @keyup 似乎不适用于 <v-list>。

例如，它们可以与 <v-text-field> 等其他元素配合使用。

<template>
  <div id="my-list">
    <v-list dense @keypress.shift="test()">
      <v-list-item-group 
        v-model="selected"
        :multiple="multiple"
        color="red"
      >
        <v-list-item v-for="(item, i) in itemList" :key="i">
          <v-list-item-content>
            <v-list-item-title v-text="item.name"></v-list-item-title>
          </v-list-item-content>
        </v-list-item>
      </v-list-item-group>
    </v-list>
  </div>
</template>

<script>
export default {
  name: "MyList",
  components: {
    //
  },

  data: () => ({
    selected: [],
    multiple: false,
    itemList: [
      { name: "My Item 1" },
      { name: "My Item 2" },
      { name: "My Item 3" },
      { name: "My Item 4" },
      { name: "My Item 5" },
      { name: "My Item 6" },
    ]
  }),
  methods: {
    test() {
      console.log("TEST");
    }
  }
};
</script>

我试过 <v-list-item-group> 和 <v-list-item>，但也没用。

当您按 Shift 时，绝对没有任何反应 - 也没有错误。

Answer 1

看起来您需要使用 @key<X>.<Y>.native，其中 X 是 down 或 up（不确定 press）和 Y 是键盘按钮之一。

示例：@keydown.ctrl.native、@keyup.alt.native、@keyup.shift.native、@keydown.shift.native 等

它适用于 <v-list>、<v-list-item-group> 和 <v-list-item>，但出于某种原因，您需要保持点击才能使其正常工作，即 pressing/releasing 一个在您仍然按住鼠标按钮的同时使用键盘按钮。

P.S。如果你想添加一个功能，例如，Ctrl+Click，你需要使用@click.ctrl="myFunction()"（只会在你松开鼠标按钮后调用 ) 或 @mousedown.ctrl="myFunction()"（无论您是否按住鼠标按钮，单击后都会立即调用）。

如何使@key 选项与<v-list> 一起使用？

How to make @key options work with <v-list>?

vue.js

vuetify.js