Vue MultiView - Customize Item Appearance
To customize views in the MultiView, define an itemTemplate.
App.vue
- <template>
- <DxMultiView
- :data-source="multiViewItems"
- item-template="item">
- <template #item="{ data }">
- <div :style="{ margin: '25px' }">
- <h1>{{data.title}}</h1>
- <div :style="{ textAlign: 'left' }">
- <p v-for="key in getItemKeys(data.data)">
- {{key}}: <b>{{data.data[key]}}</b>
- </p>
- </div>
- </div>
- </template>
- </DxMultiView>
- </template>
- <script>
- import 'devextreme/dist/css/dx.light.css';
- import DxMultiView from 'devextreme-vue/multi-view';
- export default {
- components: {
- DxMultiView
- },
- data() {
- return {
- multiViewItems: [{
- title: 'Personal Data',
- data: { firstName: 'John', lastName: 'Smith', birthYear: 1986 }
- }, {
- title: 'Contacts',
- data: { phone: '(555)555-5555', email: 'John.Smith@example.com' }
- }]
- };
- },
- methods: {
- getItemKeys: function(item) {
- return Object.keys(item);
- }
- }
- };
- </script>
You can also customize individual views. Declare them using the dxItem component:
App.vue
- <template>
- <DxMultiView>
- <DxItem text="Personal Data" />
- <DxItem text="Contacts" />
- </DxMultiView>
- </template>
- <script>
- import 'devextreme/dist/css/dx.light.css';
- import DxMultiView, { DxItem } from 'devextreme-vue/multi-view';
- export default {
- components: {
- DxMultiView,
- DxItem
- }
- };
- </script>
See Also
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.