Vue: поисковый фильтр в таблице данных

Question

У меня есть список таблицы данных, и я хочу выполнить поиск по имени клиента. Имя клиента указывается в форме таблицы клиентов (отношения). Я пытаюсь больше времени на мой код, но это не процесс. И извините, потому что я новичок в Vue js.

Текстовое поле

<div>
  <v-text-field
    label="Search Customer"
    solo 
    outlined
    dense
    v-model="search"
  ></v-text-field>
</div>

Сценарий

<script>
  export default {

	created() {
		this.fetchSearch();
	},

	watch: {
		search: {
			handler() {
				this.fetchSearch()
			}
		},
		deep: true,
	},

	data() {
		return {
			items: [],
			search: '',
		}
	},

	methods: {
		fetchSearch(){
			this.$axios.$get(`/api/return-sale?search=${this.search}`)
			.then(res =>{
				this.items = res.returnsale.data;
				console.log(res);
			})
			.catch(err =>{
				console.log(err.response);
			})
		},
	}
}

</script>

Answer 1

вы можете создать функцию через свойство watch для this.items и отфильтровать данные

watch: {
  search() {
    const data = this.items
    if (this.search.length > 0) { 
      if (data.filter(item => item.custormerName === this.search)) { 
        this.items = data.filter(item => item.custormerName === this.search);
      } else {
        this.search = '';
        this.fetchSearch();
      }
    } else {
      this.fetchSearch();
    }
  }
}

Answer 2

Если я вас правильно понял, вам нужен способ отфильтровать таблицу в вашем интерфейсе. Один из способов сделать это - получить вычисляемую переменную, которая возвращает отфильтрованный список.

computed: {
 tableItems () {
   if (!this.search) {
    return this.items;
   }

   return this.items.filter(item => item.custormer.indexOf(this.search) > -1)
 }
}

Вы также можете просмотреть filters , если собираетесь использовать этот поиск. функциональность в разных местах