Mapped cascader not working properly

💬 App Building
1

Hello,

I have created a mapped cascader with a data source containing the next array:

[
{
value: 1,
label: "Option 1",
children: [
{ value: 1.1, label: "Option 1.1" },
{ value: 1.2, label: "Option 1.2" },
],
},
{
value: 2,
label: "Option 2",
children: [
{ value: 2.1, label: "Option 2.1" },
{ value: 2.2, label: "Option 2.2" },
],
},
]

The cascader is only able to select the parent, not the children. In the mapped cascader settings, in Mapped options I have set Value and Label to {{ item.value }} and {{ item.label }}.

Anyone having the same problem?

2 
[
  {
    value: 1,
    label: "Option 1",
    children: [
      { value: 1.1, label: "Option 1.1" },
      { value: 1.2, label: "Option 1.2" },
    ],
  },
  {
    value: 2,
    label: "Option 2",
    children: [
      { value: 2.1, label: "Option 2.1" },
      { value: 2.2, label: "Option 2.2" },
    ],
  },
]
3

Hello @Gerard_Oliveras ,

I noticed your issue and tested it in my app as a demo. You can try using a JSON structure like this:

return [
  { "label": "Option 1", "value": 1 },
  { "label": "Option 1.1", "value": 1.1, "department": 1 },
  { "label": "Option 1.2", "value": 1.2, "department": 1 },
  { "label": "Option 2", "value": 2 },
  { "label": "Option 2.1", "value": 2.1, "department": 2 },
  { "label": "Option 2.2", "value": 2.2, "department": 2 }
]

This setup worked perfectly in my demo, as shown in the screenshot:

image
image1615×669 70.9 KB

I'm not 100% sure if this fits your use case, but it worked well in my test. You might find these documentation links helpful:

Let me know if you need any adjustments!

5 Likes
4

Thank you for your answer! That is so odd... but it doesn't work on my end.

imagen
imagen1920×1156 128 KB

5

@WidleStudioLLP all the options become parent on my end, there are no children

6

Hey @Gerard_Oliveras ,

You forgot to add the parent value as {{item.department}}.

image
image766×337 21 KB

4 Likes
7

@WidleStudioLLP Oh, im sorry, it works now. Amazing, so it looks like my implementation needs an additional attribute to account for parent-children level.

1 Like
8

@WidleStudioLLP I confirm that this is the solution and works with my actual implementation

1 Like