Vue表单实现历史记录搜索

要实现Vue表单的历史记录搜索，你可以使用localStorage来存储历史搜索记录，然后在表单中展示这些记录。以下是一个简单的实现示例：

1. 在Vue组件的data中添加一个history数组，用于存储历史搜索记录。

data() {
  return {
    history: []
  };
}

2. 在表单中添加一个输入框和一个按钮，用于进行搜索。在输入框中添加一个v-model指令，将输入框的值绑定到组件的searchText属性上。按钮的点击事件调用search方法，将搜索内容存储到history数组中。

<template>
  <div>
    <input type="text" v-model="searchText" />
    <button @click="search">Search</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      history: [],
      searchText: ''
    };
  },
  methods: {
    search() {
      if (this.searchText) {
        this.history.push(this.searchText);
        localStorage.setItem('history', JSON.stringify(this.history));
        // perform search
      }
    }
  }
};
</script>

3. 在组件的created钩子中，读取localStorage中的历史记录，并将其赋值给history数组。

created() {
  const history = localStorage.getItem('history');
  if (history) {
    this.history = JSON.parse(history);
  }
}

4. 在表单下方添加一个历史记录列表，展示历史搜索记录。使用v-for指令遍历history数组，将每个搜索记录展示为一个列表项。为了方便用户点击历史记录进行搜索，给每个列表项添加一个@click事件，将点击的记录赋值给searchText属性，并调用search方法进行搜索。

<template>
  <div>
    <input type="text" v-model="searchText" />
    <button @click="search">Search</button>
    
    <ul>
      <li v-for="record in history" @click="searchText = record; search">{{ record }}</li>
    </ul>
  </div>
</template>

这样，就可以实现Vue表单的历史记录搜索了。每次进行搜索时，都会将搜索内容存储到localStorage中，下次打开页面时，历史记录会自动加载。