<template>
  <div>
	<h2>Basic Menu</h2>
	<Menu :inline="true" @itemClick="onItemClick($event)">
		<MenuItem value="new" text="New"></MenuItem>
		<MenuItem text="Open">
			<SubMenu>
				<MenuItem value="word" text="Word"></MenuItem>
				<MenuItem value="excel" text="Excel"></MenuItem>
				<MenuItem value="ppt" text="PowerPoint"></MenuItem>
			</SubMenu>
		</MenuItem>
		<MenuItem value="save" text="Save" iconCls="icon-save"></MenuItem>
		<MenuItem value="print" text="Print" iconCls="icon-print" :disabled="true"></MenuItem>
		<Menu-sep></Menu-sep>
		<MenuItem value="exit" text="Exit"></MenuItem>
	</Menu>
	<p v-if="value">Item Clicked: {{value}}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: null
    };
  },
  methods: {
    onItemClick(event) {
      this.value = event;
    }
  }
};
</script>