模糊查询方法

vue模糊查询方法

HTML

<div>
    <input type="text" v-model="text" @keydown.enter="search">
    <ul>
      <li @click="$router.push('/detail')" v-for="item in list" :key="item.id">{{item.title}}</li>
    </ul>
  </div>

 vue.js

<script setup>
import { ref } from 'vue'
import axios from 'axios'
const list = ref([])
const text = ref('')
let _list = ''
axios.get('https://cnodejs.org/api/v1/topics').then(res => {
  list.value = res.data.data
  _list = JSON.stringify(list.value)
})
const search = () => {
  var arr = JSON.parse(_list)
  list.value = arr.filter(item => {
    return item.title.includes(text.value)
  })
}
</script>