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.

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

App.vue
  • <template>
  • <DxList ...
  • menu-mode="context"> <!-- or "slide" -->
  • <!-- ... -->
  • </DxList>
  • </template>
  •  
  • <script>
  • // ...
  • </script>
See Also