Create a Cascading Dropdown List Using Vue Dropdown List

Get a quick overview on how to create a Cascading Dropdown List using Vue Dropdown List of Syncfusion.

To learn how to add a basic Vue Dropdown List component to your Vue application, see:

Download a getting started example from GitHub:

In this video, you will learn how to add a series of Syncfusion Vue DropDown List to the Vue application. Also, you will see how to populate the data source of second DropDown List based on the value selected from the first DropDown List.

Example:
Documentation:
Download an example from GitHub:

BOOKMARK
---------------------
[02:19] Add a series of Dropdown List
[04:07] Configure the cascading Dropdown List

VUE DROPDOWN LIST
---------------------

SUBSCRIBE
--------------

SOCIAL COMMUNITIES
-----------------------------

#dropdownlist #vuedropdownlist

[Spacemanhp]

How do I map 2 ids(common) to one cascading id. For example: The first dropdown holds 'A' and 'B'. Second cascading holds '1', '2', '3' and '4'. When A is selected i want 1, 2 . When B is selected I want 2, 3 and 4. Is there a way to map the A and B id directly to '2' id without repeating the sentence twice? I tried with '&&' and it did not work.

alpData: [
{ alpId: "nom1", alp: "A" },
{ alpId: "nom2", alp: "B" },
],
alpField: { text: "alp", value: "alpId" },
numData: [
{ numId: "num1", num: "1", alpId: "nom1" },
{ numId: "num2", num: "2", alpId: "nom1" },
{ numId: "num2", num: "2", alpId: "nom2" }, Can I directly map alpId 'nom1' && 'nom2' in a single line?
{ numId: "num3", num: "3", alpId: "nom2" },
{ numId: "num4", num: "4", alpId: "nom2" },
],
numField: { text: "num", value: "numId" },