Vue.jsでdeleteキーを押すと検索結果が全て表示されてしまう

Question

LaravelとVue.jsで検索機能を実装しています。

検索するところでスペースキーなどを押すと検索結果が全て表示されてしまいます。

検索したところ
https://jp.vuejs.org/v2/guide/events.html
https://atuweb.net/201707_vue-guid-events/

これらを参考に書きましたがうまく動きません。

<template>
  <form class="form-inline my-2 my-lg-0">
    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" v-model="keyword">
    <button class="btn btn-outline-success my-2 my-sm-0" type="submit" v-on:click.prevent="getSearch()" @keydown.delete="null">Search</button>
    <div class="result-view">
      <ul>
        <li v-for="task in tasks">
          {{ task.title }}
        </li>
      </ul>
    </div>
  </form>
</template>

<script>
export default {
  data(){
    return {
      keyword: '',
      tasks: [],
    }
  },
  methods: {
    getSearch(){
      axios.get('api/tasks/search?title=' + this.keyword)
        .then(res => {
          this.tasks = res.data;
          console.log(res.data)
        })
        .catch(error => {
          console.log('データの取得に失敗しました')
        });
    }
  },
  watch: {
    keyword(){
      this.getSearch();
    }
  }
}
</script>

どなたか知恵をお借りしたいです。

よろしくお願いします。

vue.js 2.6.11

Answer 1

スペースがいやなのか、入力で検索されるのがいやなのか分かりませんが、
watchでデータ監視しているからではないでしょうか？

  watch: {
    keyword(){
      this.getSearch();
    }
  }

Comments

[tenlife]

ありがとうございます。その通りでした。