为什么Vue.js key修饰符只适用于`<button>`，而不适用于`<div>`？

Question

有关工作示例，请参阅this codepen。

如果单击该按钮并使用向上/向下箭头键，则按钮填充将增加/减少。

相关的HTML是：

<div class="inline-block {{ highlight_css }}">
    <button @click="toggleEditMode"
            @keydown.up.prevent="morePadding"
            @keydown.down.prevent="lessPadding"
            v-bind:style="padding"
            class="bgc-hf8f8f8 font-size-1rem line-height-23 bold border-1px-solid-gray border-radius-3">
        {{ status_text }}<br>padding: {{ amount }}px;
    </button>
</div>

向上箭头键的Vue.js方法示例：

morePadding: function() {
    if(this.editable) {
        this.amount++;
        this.padding = 'padding: ' + this.amount + 'px;';
    }
},

在我将<button>标记更改为<div>标记之前，一切都很正常。@click可以工作，但键修改器似乎坏了。

我使用read the docs，但是找不到任何标明<div>标签是特别的东西。

Answer 1

默认情况下，div元素是不可聚焦的。要使它们可聚焦，可以添加一个tabindex属性。如果不希望通过顺序导航迭代元素，请使用负值。

​

new Vue({
  el: '#highlight',
  data: {
    button_text: 'Disabled',
    amount: 0,
    highlight_css: '',
    padding: '',
    editable: false
  },
  methods: {
    toggleEditMode: function() {
      this.editable = !this.editable;
      this.changeText();
      this.highlight();
    },
    changeText: function() {
      if(this.editable){
        this.button_text = 'Enabled';
      }
      else {
        this.button_text = 'Disabled';
      }
    },
    highlight: function() {
      if(this.editable){
        this.highlight_css = 'border-2px-solid-orange border-radius-3';
      }
      else {
        this.highlight_css = '';
      }
    },
    morePadding: function() {
      if(this.editable) {
        this.amount++;
        this.padding = 'padding: ' + this.amount + 'px;';
      }
    },
    lessPadding: function() {
      if(this.editable && this.amount > 0) {
        this.amount--;
        this.padding = 'padding: ' + this.amount + 'px;';
      }
    }
  }
});

@import 'https://cdn.jsdelivr.net/foundation/6.2.0/foundation.min.css';
.inline-block {
  display: inline-block
}
.bold {
  font-weight: bold
}
.border-5px-solid-orange {
  border: 5px solid orange
}
.talign-center {
  text-align: center
}
.border-1px-solid-gray {
  border: 1px solid gray
}
.bgc-blue {
  background-color: blue
}
.border-radius-3 {
  border-radius: 0.1875em
}
.display-none {
  display: none
}
.white {
  color: white
}
.padding-top-50 {
  padding-top: 3.125em
}
.padding-5 {
  padding: 0.3125em
}
.padding-10 {
  padding: 0.625em
}
.padding-top-20 {
  padding-top: 1.25em
}
.bgc-hf8f8f8 {
  background-color: #f8f8f8
}
.margin-top-30 {
  margin-top: 1.875em
}
.border-1px-solid-orange {
  border: 1px solid orange
}
.text-align-center {
  text-align: center
}
.display-inline {
  display: inline
}
.red {
  color: red
}
.margin-bottom-20 {
  margin-bottom: 1.25em
}
.border-2px-solid-orange {
  border: 2px solid orange
}
.line-height-23 {
  line-height: 1.4375em
}
.font-size-1rem {
  font-size: 1rem
}
.margin-top-50 {
  margin-top: 3.125em
}

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.js"></script>
<div id="highlight" class="row padding-top-20">
  <div class="large-12 columns large-centered text-align-center margin-top-30">
    <!--Editing Container-->
    <div class="margin-bottom-20">Click the button.<br>Then use the up and down arrow keys to change button padding.</div>
    <div class="inline-block {{ highlight_css }}">
      <div tabindex="-1" type="submit" @click="toggleEditMode" @keydown.up.prevent="morePadding" @keydown.down.prevent="lessPadding" v-bind:style="padding" class="bgc-hf8f8f8 font-size-1rem line-height-23 bold border-1px-solid-gray border-radius-3">
        {{ button_text }}<br>padding: {{ amount }}px;
      </div>
    </div>
  </div>
  <div class="large-12 columns margin-top-50">
    <pre>{{ $data | json }}</pre>
  </div>
</div>

​