Vue Common - Object Structures - template

A template notation used to specify templates for UI component elements.

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 of data, 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:

App.vue
  • <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.

App.vue
  • <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