Movatterモバイル変換

[0]ホーム
URL:

| PDF
Edit
Suggest a Feature

    Data binding in Vue Drop down list component

    25 May 202414 minutes to read

    The DropDownList loads the data either from local data sources or remote data services using thedataSource property. It supports the data type ofarray orDataManager.

    The DropDownList also supports different kinds of data services such as OData, OData V4, and Web API, and data formats such as XML, JSON, and JSONP with the help ofDataManager adaptors.

    FieldsTypeDescription
    textstringSpecifies the display text of each list item.
    valuenumber or stringSpecifies the hidden data value mapped to each list item that should contain a unique value.
    groupBystringSpecifies the category under which the list item has to be grouped.
    iconCssstringSpecifies the icon class of each list item.

    When binding complex data to the DropDownList, fields should be mapped correctly. Otherwise, the selected item remains undefined.

    Binding local data

    Local data can be represented in two ways as described below.

    1. Array of simple data

    The DropDownList has support to load array of primitive data such as strings and numbers. Here, both value and text field act the same.

    <template><divid="app"><divid='container'style="margin:50px auto 0; width:250px;"><br><ejs-dropdownlistid='dropdownlist':dataSource='sportsData'placeholder='Select a game'></ejs-dropdownlist></div></div></template><scriptsetup>import{DropDownListComponentasEjsDropdownlist}from"@syncfusion/ej2-vue-dropdowns";constsportsData=['Badminton','Cricket','Football','Golf','Tennis'];</script><style>@import"../node_modules/@syncfusion/ej2-base/styles/material.css";@import"../node_modules/@syncfusion/ej2-inputs/styles/material.css";@import"../node_modules/@syncfusion/ej2-vue-dropdowns/styles/material.css";</style>
    <template><divid="app"><divid='container'style="margin:50px auto 0; width:250px;"><br><ejs-dropdownlistid='dropdownlist':dataSource='sportsData'placeholder='Select a game'></ejs-dropdownlist></div></div></template><script>import{DropDownListComponent}from"@syncfusion/ej2-vue-dropdowns";exportdefault{name:"App",components:{"ejs-dropdownlist":DropDownListComponent,},data(){return{sportsData:['Badminton','Cricket','Football','Golf','Tennis'];}}}</script><style>@import"../node_modules/@syncfusion/ej2-base/styles/material.css";@import"../node_modules/@syncfusion/ej2-inputs/styles/material.css";@import"../node_modules/@syncfusion/ej2-vue-dropdowns/styles/material.css";</style>

    2. Array of JSON data

    The DropDownList can generate its list items through an array of complex data. For this, the appropriate columns should be mapped to thefields property.

    In the following example,Id column andGame column from complex data have been mapped to thevalue field andtext field, respectively.

    <template><divid="app"><divid='container'style="margin:50px auto 0; width:250px;"><br><ejs-dropdownlistid='dropdownlist'placeholder='Select a game':dataSource='sportsData':fields='fields'></ejs-dropdownlist></div></div></template><scriptsetup>import{DropDownListComponentasEjsDropdownlist}from"@syncfusion/ej2-vue-dropdowns";constsportsData=[{Id:'game1',Game:'Badminton'},{Id:'game2',Game:'Football'},{Id:'game3',Game:'Tennis'}]constfields={text:'Game',value:'Id'}</script><style>@import"../node_modules/@syncfusion/ej2-base/styles/material.css";@import"../node_modules/@syncfusion/ej2-inputs/styles/material.css";@import"../node_modules/@syncfusion/ej2-vue-dropdowns/styles/material.css";</style>
    <template><divid="app"><divid='container'style="margin:50px auto 0; width:250px;"><br><ejs-dropdownlistid='dropdownlist'placeholder='Select a game':dataSource='sportsData':fields='fields'></ejs-dropdownlist></div></div></template><script>import{DropDownListComponent}from"@syncfusion/ej2-vue-dropdowns";exportdefault{name:"App",components:{"ejs-dropdownlist":DropDownListComponent},data(){return{sportsData:[{Id:'game1',Game:'Badminton'},{Id:'game2',Game:'Football'},{Id:'game3',Game:'Tennis'}],fields:{text:'Game',value:'Id'},}}}</script><style>@import"../node_modules/@syncfusion/ej2-base/styles/material.css";@import"../node_modules/@syncfusion/ej2-inputs/styles/material.css";@import"../node_modules/@syncfusion/ej2-vue-dropdowns/styles/material.css";</style>

    3. Array of Complex data

    The DropDownList can generate its list items through an array of complex data. For this, the appropriate columns should be mapped to thefields property.

    In the following example,Code.Id column andCountry.Name column from complex data have been mapped to thevalue field andtext field, respectively.

    <template><divid="app"><divid='container'style="margin:50px auto 0; width:250px;"><br><ejs-dropdownlistid='dropdownlist'placeholder='Select a country':dataSource='countriesData':fields='fields'></ejs-dropdownlist></div></div></template><scriptsetup>import{DropDownListComponentasEjsDropdownlist}from"@syncfusion/ej2-vue-dropdowns";constcountriesData=[{Country:{Name:'Australia'},Code:{Id:'AU'}},{Country:{Name:'Bermuda'},Code:{Id:'BM'}},{Country:{Name:'Canada'},Code:{Id:'CA'}},{Country:{Name:'Cameroon'},Code:{Id:'CM'}},{Country:{Name:'Denmark'},Code:{Id:'DK'}},{Country:{Name:'France'},Code:{Id:'FR'}}]constfields={text:'Country.Name',value:'Code.Id'}</script><style>@import"../node_modules/@syncfusion/ej2-base/styles/material.css";@import"../node_modules/@syncfusion/ej2-inputs/styles/material.css";@import"../node_modules/@syncfusion/ej2-vue-dropdowns/styles/material.css";</style>
    <template><divid="app"><divid='container'style="margin:50px auto 0; width:250px;"><br><ejs-dropdownlistid='dropdownlist'placeholder='Select a country':dataSource='countriesData':fields='fields'></ejs-dropdownlist></div></div></template><script>import{DropDownListComponent}from"@syncfusion/ej2-vue-dropdowns";exportdefault{name:"App",components:{"ejs-dropdownlist":DropDownListComponent},data(){return{countriesData:[{Country:{Name:'Australia'},Code:{Id:'AU'}},{Country:{Name:'Bermuda'},Code:{Id:'BM'}},{Country:{Name:'Canada'},Code:{Id:'CA'}},{Country:{Name:'Cameroon'},Code:{Id:'CM'}},{Country:{Name:'Denmark'},Code:{Id:'DK'}},{Country:{Name:'France'},Code:{Id:'FR'}}],fields:{text:'Country.Name',value:'Code.Id'}}}}</script><style>@import"../node_modules/@syncfusion/ej2-base/styles/material.css";@import"../node_modules/@syncfusion/ej2-inputs/styles/material.css";@import"../node_modules/@syncfusion/ej2-vue-dropdowns/styles/material.css";</style>

    Binding remote data

    The DropDownList supports retrieval of data from remote data services with the help ofDataManager component. TheQuery property is used to fetch data from the database and bind it to the DropDownList.

    The following sample displays the first 6 contacts from “Customers” table of theNorthwind Data Service.

    <template><divid="app"><divid='container'style="margin:50px auto 0; width:250px;"><br><ejs-dropdownlistid='dropdownlist'placeholder='Select a customer'sortOrder='Ascending':dataSource='dataSource':query='query':fields='fields'></ejs-dropdownlist></div></div></template><scriptsetup>import{DropDownListComponentasEjsDropdownlist}from"@syncfusion/ej2-vue-dropdowns";import{DataManager,Query,ODataV4Adaptor}from"@syncfusion/ej2-data";constquery=newQuery().from('Customers').select(['ContactName','CustomerID']).take(6);constdataSource=newDataManager({url:'https://services.odata.org/V4/Northwind/Northwind.svc/',adaptor:newODataV4Adaptor,crossDomain:true});constfields={text:'ContactName',value:'CustomerID'};</script><style>@import"../node_modules/@syncfusion/ej2-base/styles/material.css";@import"../node_modules/@syncfusion/ej2-inputs/styles/material.css";@import"../node_modules/@syncfusion/ej2-vue-dropdowns/styles/material.css";</style>
    <template><divid="app"><divid='container'style="margin:50px auto 0; width:250px;"><br><ejs-dropdownlistid='dropdownlist'placeholder='Select a customer'sortOrder='Ascending':dataSource='dataSource':query='query':fields='fields'></ejs-dropdownlist></div></div></template><script>import{DropDownListComponent}from"@syncfusion/ej2-vue-dropdowns";import{DataManager,Query,ODataV4Adaptor}from"@syncfusion/ej2-data";exportdefault{name:"App",components:{"ejs-dropdownlist":DropDownListComponent},data(){return{query:newQuery().from('Customers').select(['ContactName','CustomerID']).take(6),dataSource:newDataManager({url:'https://services.odata.org/V4/Northwind/Northwind.svc/',adaptor:newODataV4Adaptor,crossDomain:true}),fields:{text:'ContactName',value:'CustomerID'}}}}</script><style>@import"../node_modules/@syncfusion/ej2-base/styles/material.css";@import"../node_modules/@syncfusion/ej2-inputs/styles/material.css";@import"../node_modules/@syncfusion/ej2-vue-dropdowns/styles/material.css";</style>

    See Also

    Help us improve this page

    Please provide additional information

    Please provide additional information

    Please provide additional information

    Please provide additional information

    Please provide additional information
    Please provide additional information
    ×
    [8]ページ先頭
    ©2009-2025 Movatter.jp