【Vue.js】特定のキーを押した際に入力欄を一括削除したい

<body>
<div id="app">
    <form>
        <input type="text" @keyup.27="clear" v-model="name">
    </form>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="template.js" charset="utf-8"></script>

var app = new Vue({
    el: '#app',
        data:{
            name:'ゲスト',
        },
        methods: {
            clear: function() {
            return this.name = '';
        }
    }
});

<input type="text" @keyup.27="clear" v-model="name">

の.27という修飾子は、Escキーのキーコードに当たる。これを他のキーコードに変えることによって、指定のキーを押すことで同様の効果を得られます。

ちなみに、以下のように書き換え可能。

<input type="text" @keyup.esc="clear" v-model="name">

特定のキーについてはエイリアス（別名）があるため、そちらを修飾子に用いることができます。

他のキーコードのエイリアスは…

.enter
.tab
.delete
.exc
.space
.up
.down
.left
.right

となります。

参考

速習Vue.js 速習シリーズ山田祥寛