Skip to content

Instantly share code, notes, and snippets.

@wilcorrea

wilcorrea/ProductTable.vue

Last active Mar 25, 2020
Embed
What would you like to do?
Fazer funcionar filtro conforme valor do combobox
<template>
<va-card :title="$t('menu.products')">
<div class="row">
<div class="flex xs12 md4">
<va-input
:value="term"
:placeholder="$t('tables.searchByProduct')"
@input="search"
removable
>
</va-input>
</div>
<div class="flex xs12 md4">
<va-select
:label="$t('forms.selects.criticality')"
v-model="selectCriticality"
textBy="name"
:options="listProductCriticals"
@input="search"
/>
</div>
</div>
<va-data-table
:fields="fields"
:data="filteredData"
:per-page="15"
>
</va-data-table>
</va-card>
</template>
<script>
import ProductAPI from '@/services/ProductAPI'
import ProductCriticalityAPI from '@/services/ProductCriticalityAPI'
export default {
data () {
return {
data: [],
term: null,
selectCriticality: '',
listProductCriticals: [],
teste: ''
}
},
mounted () {
ProductCriticalityAPI.getAllProductCriticalities().then(response => {
this.listProductCriticals = response.data
})
this.getAllProducts()
},
watch: {
'selectCriticality'(newSelect) {
this.teste = newSelect.id
return this.data.filter(item => {
console.log(item.product_criticality.id)
})
}
},
computed: {
fields () {
return [{
name: 'id',
title: this.$t('tables.products.id'),
width: '3%',
},
{
name: 'staging',
title: this.$t('tables.products.staging'),
width: '3%',
},
{
name: 'label',
title: this.$t('tables.products.label'),
width: '20%',
},
{
name: 'product_criticality.name',
title: this.$t('tables.product_criticalities.name'),
width: '20%',
},
{
name: 'package.name',
title: this.$t('tables.packages.name'),
width: '20%',
},
{
name: 'package.ballast',
title: this.$t('tables.packages.ballast'),
width: '5%',
},
{
name: 'package.height',
title: this.$t('tables.packages.height'),
width: '5%',
},
{
name: '__slot:actions',
dataClass: 'text-right',
}]
},
filteredData () {
if (!this.term || this.term.length < 1) {
return this.data
}
return this.data.filter(item => {
// console.log(item.product_criticality.id)
return item.label.toLowerCase().includes(this.term.toLowerCase())
})
},
},
methods: {
getAllProducts () {
this.loading = true
ProductAPI.getAllProducts().then(response => {
this.data = response.data
this.loading = false
})
},
search: debounce(function ($event) {
if (typeof $event === 'string') {
this.term = $event
return
}
this.term = $event.name
}, 400),
},
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.