Vue List - Item Context Menu
If you want to offer the user a set of commands related to a List item, you can do so with the context menu. To specify the commands, use the menuItems array. Each object in this array configures a single command.
- <template>
- <DxList
- :data-source="fruits"
- item-template="list-item">
- <template #list-item="{ data }">
- <b>{{ data.fruit }}</b>
- </template>
- <DxMenuItem
- text="Add to Cart"
- :action="addToCart"
- />
- <DxMenuItem
- text="View Details"
- :action="showDetails"
- />
- <DxMenuItem
- text="Register a Complaint"
- :action="complain"
- />
- </DxList>
- </template>
- <script>
- import 'devextreme/dist/css/dx.light.css';
- import DxList, {
- DxMenuItem
- } from 'devextreme-vue/list';
- import notify from 'devextreme/ui/notify';
- const fruits = [
- { fruit: "Apples", count: 10 },
- { fruit: "Oranges", count: 12 },
- { fruit: "Lemons", count: 15 }
- ];
- export default {
- components: {
- DxList,
- DxMenuItem
- },
- data() {
- return {
- fruits
- }
- },
- methods: {
- addToCart (e) {
- // ...
- notify(e.itemData.fruit + " are added to cart");
- },
- showDetails (e) {
- // ...
- },
- complain (e) {
- // ...
- }
- }
- }
- </script>
The user can access the commands in one of the following ways depending on the value of the menuMode property.
"context"
The user right-clicks or performs a long tap on an item to open the context menu with the commands."slide"
The user swipes an item to access the commands. If the menuItems array contains a single command, swiping the item reveals the button executing this command. If there are several commands in the menuItems array, swiping the item reveals the "More" button that opens a pop-up window with these commands.
- <template>
- <DxList ...
- menu-mode="context"> <!-- or "slide" -->
- <!-- ... -->
- </DxList>
- </template>
- <script>
- // ...
- </script>
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.