Vue: Search filter on data table

发布于 2020-03-27 15:40:18

I have a list of data table, and I want to search on Customer' name. The Customer's name are get form customers table(relationship). I'm try more time on my code, but It's not process. And sorry because I'm new on Vue js.

Text Field

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

Script

<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>

Questioner

Dem Sikii

Viewed

Chinese

Original

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(); } } }

Vue: Search filter on data table

Related issues