Vue

by Jeevan Mb

HTML

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>


<div id="app">
  <div class="sorter-holder">
    <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
      <input class="mdl-textfield__input" type="text" v-model="sortBy" id="sorterHolder" readonly>
      <label class="mdl-textfield__label" for="sorterHolder">Sort by</label>
    </div>
    <ul class="mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect sorter-menu" for="sorterHolder">
      <li class="mdl-menu__item" v-for="srtr in sortables" @click="update(srtr)">{{ srtr }}</li>
    </ul>
  </div>

</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}


.sorter-holder {
	position: relative;
  display: inline-block;
}

.sorter-holder .mdl-menu__outline,
 .sorter-holder .mdl-menu__container, 
 .sorter-menu {
   width: 100% !important;
}

Vue

new Vue({
  el: "#app",
  data: {
  	sortables: [
    	'Name (A-Z)',
      'Name (Z-A)',
      'Newest First',
      'Oldest First'
    ],
  	sortBy: null
  },
  methods: {
  	update: function (sortBy) {
			this.sortBy = sortBy;
		}
  }
})