JSFiddle - React, Tailwind, and code Playground
HTML
<div id='vueRoot'>
<input type=radio id='all' value='all' v-model='vueStore.currView'>
<label for='all'>All</label>
<input type=radio id='month' value='month' v-model='vueStore.currView'>
<label for='month'>Month</label>
<input type=radio id='year' value='year' v-model='vueStore.currView'>
<label for='year'>Year</label>
<br>
{{displayDates}}
</div>
JavaScript
var vueStore = {
currView : null,
allDates : JSON.parse('[ { "date": "2018-02-05", "views": 1, "readMore": 1 }, { "date": "2018-03-15", "views": 1, "readMore": 1 }, { "date": "2018-04-27", "views": 2, "readMore": 2 } ]')}
// convert date strings to dates
vueStore.allDates = vueStore.allDates.map( line => {line.date = new Date(line.date + 'T00:00:00Z'); return line})
vm = new Vue({
el:'#vueRoot',
data : {vueStore : vueStore},
computed : {
displayDates(){
var now = new Date(Date.now());
switch(vueStore.currView){
case 'all': return vueStore.allDates;
case 'month' : return vueStore.allDates.filter(
line => line.date > new Date(now.getFullYear(), now.getMonth(),0)
);
case 'year' : return vueStore.allDates.filter(
line => line.date > new Date(now.getFullYear(), 0,0)
)
}
}
}
})