<template>
  <div>
		<h2>Search Category</h2>
		<SearchBox style="width:300px"
				placeholder="Input something here" 
        v-model="value"
				@search="onSearch($event)">
			<Addon>
				<span v-if="value" class="textbox-icon icon-clear" title="Clear value" @click="value=null"></span>
			</Addon>
      <Menu>
        <MenuItem value="all" text="All News" iconCls="icon-ok"></MenuItem>
        <MenuItem value="sports" text="Sports News" iconCls="icon-man"></MenuItem>
      </Menu>
		</SearchBox>
		<p>You are searching: {{searchingValue}}</p>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      value: null,
      searchingValue: null
    };
  },
  methods: {
    onSearch(event) {
      this.searchingValue = event;
    }
  }
};
</script>