How To Use Syncfusion Dropdown Tree In Vue.js Application

Introduction

In this article, we will learn how to add Syncfusion Dropdown Tree in the Vue.js application.

Prerequisites

• Basic knowledge of Vue.js 
• Visual Studio Code IDE should be installed on your system.
• Basic knowledge of HTML and CSS

Create Vue.js project

Create a Vue.js project by using the following command.

vue create vueapp

Open the newly created project in Visual Studio Code and install Synfusion autocomplete dropdown library using the following command.

npm install @syncfusion/ej2-vue-dropdowns

Now, create a JSON file named country-data.json to create some dummy data.

{
    "checkboxData":  [
        { "id": 1, "name": "Australia", "hasChild": true, "expanded": true },
        { "id": 2, "pid": 1, "name": "New South Wales" },
        { "id": 3, "pid": 1, "name": "Victoria" },
        { "id": 4, "pid": 1, "name": "South Australia" },
        { "id": 6, "pid": 1, "name": "Western Australia" },
        { "id": 7, "name": "Brazil", "hasChild": true },
        { "id": 8, "pid": 7, "name": "Paraná" },
        { "id": 9, "pid": 7, "name": "Ceará" },
        { "id": 10, "pid": 7, "name": "Acre" },
        { "id": 11, "name": "China", "hasChild": true },
        { "id": 12, "pid": 11, "name": "Guangzhou" },
        { "id": 13, "pid": 11, "name": "Shanghai" },
        { "id": 14, "pid": 11, "name": "Beijing" },
        { "id": 15, "pid": 11, "name": "Shantou" },
        { "id": 16, "name": "France", "hasChild": true },
        { "id": 17, "pid": 16, "name": "Pays de la Loire" },
        { "id": 18, "pid": 16, "name": "Aquitaine" },
        { "id": 19, "pid": 16, "name": "Brittany" },
        { "id": 20, "pid": 16, "name": "Lorraine" },
        { "id": 21, "name": "India", "hasChild": true },
        { "id": 22, "pid": 21, "name": "Assam" },
        { "id": 23, "pid": 21, "name": "Bihar" },
        { "id": 24, "pid": 21, "name": "Tamil Nadu" },
        { "id": 25, "pid": 21, "name": "Punjab" }
    ]
}

Now open App.vue and add the following code.

<template>
<div>
<div class="col-lg-12 control-section dropdowntree-custom">
    <div class="control_wrapper">
        <ejs-dropdowntree id='dropdowntree' ref="ddtreeObj" :fields='fields' :customTemplate='customTemplate'  :treeSettings='treeSettings' mode= 'Custom' :placeholder='waterMark' :popupHeight='height'></ejs-dropdowntree>
    </div>
</div>


</div>
</template>
/* custom code start */
<style>
.dropdowntree-custom .control_wrapper {
        margin: 0 auto;
        width:250px; 
        padding-top: 15px
    }
</style>
/* custom code end */
<script>
import { DropDownTreeComponent } from "@syncfusion/ej2-vue-dropdowns";
import dataSource from './country-data.json';

export default {
    components: {
        'ejs-dropdowntree': DropDownTreeComponent
    },
    data: function() {
        return {
            fields: { dataSource: dataSource.checkboxData, value: 'id', text: 'name', parentValue: 'pid', hasChildren: 'hasChild' },
            height: '200px',
            waterMark: 'Select items',
            treeSettings: { autoCheck: true },
            customTemplate: '${value.length} item(s) selected'
        };
    }
}
</script>

Inside this component, we have added a synfusion dropdown tree in the template section. And Bind the data.

In the script section, we have imported the synfusion dropdown tree reference. Also, we import reference for the json file, which we created to add dummy data.

Now run the project using the 'npm run serve' command.

Summary

In this article, we learned how to add a Syncfusion dropdown tree in the Vue.js application.