Vue Common - Object Structures - template
Templates are passed as properties that end with ...Template (in jQuery, Angular, and Vue) or ...Render/...Component (in React).
Each template has access to the following parameters:
data
A data source object or an object with fields specific to a particular template. For information on the contents ofdata
, refer to the Template Data section of the template's API reference article.index
A zero-based index of the item in the collection. Available only in collection UI component templates.element
A jQuery element that represents the UI component element being customized. Available only if you use jQuery.
The following code shows how to declare a template and use these parameters. This code declares an itemTemplate for the List UI component:
- <template>
- <DxList
- :items="listData"
- item-template="list-item">
- <template #list-item="{ data, index }">
- {{ index }} - {{ data.itemProperty }}
- </template>
- </DxList>
- </template>
- <script>
- import 'devextreme/dist/css/dx.common.css';
- import 'devextreme/dist/css/dx.light.css';
- import DxList from 'devextreme-vue/list';
- export default {
- components: {
- DxList
- },
- data() {
- return {
- listData: [
- { itemProperty: 'someValue' },
- // ...
- ]
- }
- }
- }
- </script>
Collection UI components also support templates for individual items. Do not specify the UI component's dataSource property if you use individual templates.
- <template>
- <DxList>
- <DxItem>
- <template #default>
- <i>Item 1</i>
- </template>
- </DxItem>
- <DxItem>
- <template #default>
- <i>Item 2</i>
- </template>
- </DxItem>
- <DxItem>
- <template #default>
- <div>
- Item with a nested component
- <DxButton text="Click me" />
- </div>
- </template>
- </DxItem>
- </DxList>
- </template>
- <script>
- import 'devextreme/dist/css/dx.common.css';
- import 'devextreme/dist/css/dx.light.css';
- import DxList, {
- DxItem
- } from 'devextreme-vue/list';
- import DxButton from 'devextreme-vue/button';
- export default {
- components: {
- DxList,
- DxItem,
- DxButton
- }
- }
- </script>
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.