vue实现前端模糊搜索--查询列表数据

<script>
	export default {
		components: {},
		mixins: [],
		props: {
			listInfo: {
				type: Array,
				default: () => []
			}
		},
		data() {
			return {
				searchName: '',
				listData: []
			}
		},
		mounted() {},
		watch: {
			listInfo: {
				immediate: true,
				deep: true,
				handler(val) {
					this.listData = val
				}
			}
		},
		methods: {
			//搜索
			handleSearch() {
				let list = []
				let foodIds = []
				if (this.searchName !== '') {
					this.listInfo.map(item => {
						if (!!item.label && item.label.indexOf(this.searchName) > -1) {
							let foodInfoId = item.value
							if (foodIds.indexOf(foodInfoId) === -1) {
								foodIds.push(foodInfoId)
								list.push(item)
							}
						}
					})
				} else {
					// 清空保留左边原本有的数据
					list = this.listInfo
				}
				this.listData = JSON.parse(JSON.stringify(list))
			}
		}
	}
</script>