Item Menus

<template lang="pug">
  .test-slat-table
    NioSlatTable(
      v-if="columns && items"
      :items="items"
      :columns="columns"
      action="menu"
      @itemClicked="handleItemClicked($event)"
    )
      template(v-slot:item-menu="slotProps")  
        v-list
          v-list-item(@click="menuItemClicked('updateName', slotProps.item)") Update order name
          v-list-item(@click="menuItemClicked('updateBudget', slotProps.item)") Update Order budget
          v-list-item(@click="menuItemClicked('delete', slotProps.item)") Delete order {{ slotProps.item.orderNumber }}
</template>

<script>

import { testItems } from './mocks/slatTableItems'

export default {
  data: () => ({
    columns: null,
    items: testItems
  }),
  methods: {  
    computeOrderNumber(item) {
      return `#${item.orderNumber}`
    },
    computeSpentBudget(item) {
      return `$${item.spent}/$${item.budget}`
    },
    menuItemClicked(event, item) {
      alert(`Menu item clicked. Event: ${event}, Order id: ${item.orderNumber}`)
    },
    makeColumns() {
      this.columns = [
        {
          name: "slat",
          props: {
            image: "imageSrc",
            title: "orderName",
            subtitle: this.computeOrderNumber
          }
        },
        {
          name: "spentBudget",
          label: "Spent/Budget",
          computed: this.computeSpentBudget
        }
      ]  
    }
  },
  mounted() {
    this.makeColumns()
  }
};
</script>