Filtering an array using the slider (input type: range) VUE JS

Question

Help us implement array filtering with filter and slider. Display data (filtered) when the slider values change

var vm = new Vue({ el: '#content', data: { years: [ { year: 2016, end: true }, { year: 2017, end: true }, { year: 2018, end: true }, { year: 2019, end: false } ] }, methods: { changeValueRange: function () { } } })

 <div id="content"> <input type="range" max="2019" min="2016" v-model="rangeYear" v-on:change="changeValueRange()" > <input type="text" v-model="rangeYear" readonly> <div v-for="year in years"> <span>{{year.year}}</span> </div> </div>

Dmytryk Dmytryk 3,370 one 6 26 · Accepted Answer · 2019-04-15T13:22:11

 var vm = new Vue({ el: '#content', data: { rangeYear: 2016, years: [ { year: 2016, end: true }, { year: 2017, end: true }, { year: 2018, end: true }, { year: 2019, end: false } ] }, computed: { filterValue(){ const currentValue = this.rangeYear; const d = this.years.filter(year => { return year.year === +currentValue }); return d } }, })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="content"> <input type="range" max="2019" min="2016" v-model="rangeYear" > <input type="text" v-model="rangeYear" readonly> <div v-for="year in filterValue"> <span>{{year.year}}</span> </div> </div>

Could you clarify a bit more: + currentValue - what does this "expression" mean?

Filtering an array using the slider (input type: range) VUE JS

1 answer 1

More articles: