mdbEVqa

index.html

<div id='app'>
  <div 
       v-for="date in daysInMonth" :key='date.id' 
       class='main'
       :class={'active':date.active}
       @click='toggleDay(date)'
       >
    {{date.value}}
  </div>
</div>

mdbevqa.markdown

mdbEVqa

A Pen by Sean White on CodePen.

License.

script.js

var app = new Vue({  
  el: "#app",
  data: {
    
  },
  computed:{
    daysInMonth(){      
      return this.createDaysInMothArr()
    }
  },
  methods: {
    toggleDay(day){
      day.active = !day.active
    },
    createDaysInMothArr(){
          var count = 123
          var daysLen = 31
          var daysInMonth = []
          for(var i = 1; i <= daysLen; i++){
            daysInMonth.push({
              index:count++,
              value:i,
              active:false
            })
          }
          return daysInMonth
        }
  }
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>

style.css

.main{
  display:flex;
  justify-content:space-evenly;
  align-items:center;
}

.active{
  background:red
}