Vue Todo local storage

{{testTodo}}
• {{todo.title}}

Vue localstorage plugin

counter: {{setCounter}}

change orientation to portrait

    isPro(){
      return this.$ons.orientation.isPortrait()
    }

Blogger API Vuejs

  Total Posts:{{bloggerData.posts.totalItems}}

new Vue({
  el: '#app',
  data(){
    return{
      bloggerData: null
    }
  },
  mounted(){
    var vm = this
    vm.fetchBloggerApi()
  },
  methods:{
    fetchBloggerApi(){
      var vm = this; 
      axios.get('https://www.googleapis.com/blogger/v3/blogs/2050012838741546861?key=YOUR_API_KEYS')
      .then(function (response) {
        vm.bloggerData = response.data
      })
      .catch(function (error) {
        console.log(error);
      });
    }
  }
})

Multiple remove from object

Add User

Options

• {{ option.name }}

  

    
Add User
    
    
    
    
Options
    

      
{{ option.name }}
    
    
  
  

    
    
  

Vue.component("checkbox", {
  template: "#checkbox-template",
  props: [ "id", "value", "val"],
  
  data() {
    return {
      proxy: false
    };
  },
  
  computed: {
    checked: {
      get() {
        return this.value;
      },
      set(value) {
        this.proxy = value;
      }
    }
  },
  
  methods: {
    onChange(event) {
      console.log(this.val )
      this.$emit("input", this.proxy);
    }
  }
});
new Vue({
  el: "#app",
  data() {
    return {
      options: [{
        id: 0,
        name: "John",
        age: 32,
        completed:false
      }, {
        id:1,
        name: "Lance",
        age: 28,
        completed:false
      }],
      addUser:{
        name: '',
        age: 0,
        completed: false
      },
      selected: [],
      filters: {
        notDone: function(option) {
          return !option.completed;
        }
      }
    }
  },
  methods:{
    destroyUser(){
      this.options = this.options.filter(this.filters.notDone);
    },
    setUser(){
      this.options.push(_.clone(this.addUser))
    }
  }
});

How to reshape an array with lodash

.zip.apply(, _.chunk("Your array", "columns"));

How this works:

Let's say you have an array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, etc]

_.chunk(array, 3) will give you [ [1,2,3], [4,5,6], [7,8,9], [10,11,12], [13, 14] ]

.zip.apply(, _.chunk(array, 3)); will give you: [ [1,4,7,10,13], [2,5,8,11,14], [3,6,9,12] ]

var data =  [ [ "a", "b" ], [ "c", "d" ] ];
new Vue({
  el: '#app',
  template: '#main',
  data() {
    return {
      renderItem:
        i => new Vue({
          template: `
            

              #{{ dataReturn }}
            
          `,
          data() {
            return {
              index: i
            };
          },
          computed:{
            dataReturn(){
              return data[this.index]
            }
          }
        })
    };
  }
});

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++
      }
    }
  }
})