Dinner Decider vuejs lodash

{{randomDinnerChoose | capitalize}}

{{dinnerChooser}}

Add Dinner

  
{{randomDinnerChoose | capitalize}}
  {{dinnerChooser}}
  

    Add Dinner
    
  
  

    
    
  

new Vue({
  el:'#app',
  data(){
    return{
      dinnerChooser: ['dairy','seafood','pasta','vegetable','egg','fish a'],
      incrementDinner: 0,
      inputDinner: '',
      randomDinnerChoose: null
    }
  },
  filters:{
    capitalize(string){
      return _.startCase(string);
    }
    
  },
  methods:{
    addDinner(){
      var vm = this
      if(vm.inputDinner){
        vm.dinnerChooser.push(vm.inputDinner) 
      }else{
        alert('put Something')
      }
    },
    randomDinner(){
      var vm = this
      if(vm.incrementDinner == vm.dinnerChooser.length - 1){
        vm.incrementDinner = 0 
        // it will shuffle until the condition was meet
        vm.dinnerChooser = _.shuffle(vm.dinnerChooser);
      }else{
        //else continue the process of increment dinner
        vm.randomDinnerChoose = vm.dinnerChooser[vm.incrementDinner]
        vm.incrementDinner++
      }
    }
  }
})