SOLVED: filtering with dropdown objects

UI Components for Vue
Post Reply
mexion
Posts: 5
Joined: 21 Dec 2022, 20:05

11 Feb 2023, 20:42

Fitlering with dropdown objects

I am trying to extend teh datatable examples with a filter option with a basic dropdown and instead of values I want to pass in an object.
I want to filter on the status

```
{
"id":1001,
"name":"Josephine Darakjy",
"status": {
"label": "proposal"
},
},
{
"id":1002,
"name":"Jarakjy",
"status": {
"label": "new"
},
}

```

I created the options filter

```
options : [
{label: "unqualified"},
{label: "proposal"},
]
```

const filterSpecs = ref({
'global': {value: null, matchMode: FilterMatchMode.CONTAINS},
'status': {value: null, matchMode: FilterMatchMode.EQUALS},
});

to the dropdown component I added
```
optionLabel="label"
optionValue="label"
```

The dropdown shows the labels only (not the object) = oke
after selection the filterModel.value is the label = oke
but the filtering results in "no results"

Any idea what I am missing here

Somthing that might also help is where I could find the actual js code that is performing the filtering itself
Last edited by mexion on 12 Feb 2023, 12:00, edited 1 time in total.

mexion
Posts: 5
Joined: 21 Dec 2022, 20:05

12 Feb 2023, 12:00

I solved this issue, although I am not exactly sure how.
One of the reasons is that the example multiselect filter filters on the object, and the dropdown filters on the text field content
Once I changed the filterSpecs from "status" to "status.name" things started to work

Post Reply

Return to “PrimeVue”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 9 guests