Vueは、検索でキーボードの上下キーをクリックすると、検索に対応する関連キーワードコンテンツの切り替えを実現します??? Baidu検索

実装のアイデア：
1。キーボードの上下キーを押すときは、liラベルの添え字をクラススタイルにバインドします
。2 。もう一度上ボタンをクリックするときは、最初の添え字値を考慮します。これは0にすることはできません。下の表のli0に最初
は達していない
、
特別な状況：最小の添え字が押されたときの添え字の処理方法3.下ボタンがクリックされたとき、特別な状況：最大の添え字が押されたとき私は入札するときにしますか？

サブコンポーネント内=》

<div class="search">
    <div>
      <i class="fa fa-search" aria-hidden="true"></i>
      <input
        type="search"
        v-model="title"
        @input="send"
        @keyup.enter="sendTwo"
        @keydown.up="up"
        @keydown.down="down"
        @blur="hidden"
      />
    </div>
    <p @click="cancel">取消</p>
    <ul class="list" v-if="show">
      <li v-for="(item,key) in list" :key="key" :class="{bg:key==index}">{
   
   {item}}</li>
    </ul>
  </div>

data() {
    return {
      title: "",
      index: -1,
      show: true
    };
  },
  props: {
    list: {
      type: Array,
      default: []
    }
  },
  methods: {
    send() {
      this.$emit("sendData", this.title);
    },
    sendTwo() {
      this.send();
    },
    cancel() {
      this.title = "";
      this.$emit("sendData", this.list);
    },
    up() {
      if (this.index == -1 || this.index == 0) {
        this.index = this.list.length - 1;
      } else {
        this.index--;
      }
      this.title = this.list[this.index];
    },
    down() {
      if (this.index < this.list.length - 1) {
        this.index++;
      } else {
        this.index = 0;
      }
      this.title = this.list[this.index];
    },
    hidden() {
      this.show = false;
      this.title = "";
    }
  }

css
.bg {
  background-color: #eee;
  color: #fff;
}
.list {
  width: 100%;
  padding: 0 50px;
  box-sizing: border-box;
  li {
    height: 30px;
    line-height: 30px;
    border-bottom: 1px solid #ccc;
  }
}
.search {
  width: 100%;
  display: flex;
  height: 40px;
  align-items: center;
  justify-content: space-around;
  flex-wrap: wrap;
  div {
    width: 90%;
    input {
      width: 90%;
      height: 30px;
      border: 1px solid #000;
      border-radius: 20px;
      outline: none;
      text-indent: 25px;
    }
    i {
      position: relative;
      top: 2px;
      left: 20px;
    }
  }
}

父子アイテム=》

  <Search @sendData="getData" :list = "lists"></Search>

 data() {
    return {
      title: "",
      list: [],
      lists: []
    };
  },
  methods: {
    getData(data) {
      this.title = data;
      this.lists = [];
      this.list.forEach(v => {
        if (v.indexOf(this.title) !== -1) {
          this.lists.push(v);
        }
      });
      if (this.title == "") {
        this.lists = [];
      }
     }
  },
  mounted() {
    this.$axios.get("data.json").then(res => {
      this.list = res.data;
    });
  }