JSFiddle - React, Tailwind, and code Playground

by asemahle

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/0.12.16/vue.js"></script>
<div id="app">
  Only show values less that <input type="number" v-model="maxNum"/>
  <select v-model="selected" options="filteredOptions"></select>
</div>

JavaScript

var app = new Vue({
	el: '#app',
  
  data: {
  	selected: '',
    maxNum: 5,
    options: [
      { text: '1', value: 1 },
      { text: '2', value: 2 },
      { text: '3', value: 3 },
      { text: '4', value: 4 },
      { text: '5', value: 5 },
    ]
  },
  
  computed: {
  	filteredOptions: function() {
    	return this.options.filter(function(option) {
				return option.value < parseInt(this.maxNum);
      }.bind(this));
    }
  }
})