Hello,
I am working on a VUE grid with a special template column that shows chips on it. Each row can have multiple chips selected and I need to be able to filter them out. The filter is not working correctly, sometimes it breaks the UI. How can I make the filter work?
Let me add some code so I can explain myself better:
This is the datasource:
[
{"id":1,"name":"Ticket 1","selectedLabels":[]},
{"id":2,"name":"Ticket 2","selectedLabels":['billed']},
{"id":3,"name":"Ticket 3","selectedLabels":['billed','payed']}
]
This is the column:
This is the template:
chipsTemplate: function () {
return {
template: Vue.component("columnTemplate", {
template: `
`,
data: function () {
return {
data: {},
};
},
computed: {
chipList: function(args) {
var data = this.data.selectedLabels; var values = [];
data.forEach(element => {
values.push({id: element, name: element});
});
return values;
}
},
}),
};
},
So far everything works well, except the filter.
Filter with this value breaks: labelsFilter: {type:'Menu'}
Filter with checkboxes does not break, but it does not filter correctly: labelsFilter: {type:'CheckBox'}
I want to be able to select 'billed' on the filter and the result must be rows 2 and 3.
Also, there is something that I would like to do: each label comes with a specific color (hex), and it is selected by the user on the label's administration. Right now I am showing all chips with e-primary style, but what I really need to do is show the chip with its specific color.
Is there a way to set the chip color by doing something like this:
Thanks
