Chrome Extension

vuejs code snippets

Loop n times vuejs
<ul>
  <li v-for="(n, index) in 10">{{ n }}</li>
</ul>
Add class to an element condition based in Vuejs
<template>
    <div v-bind:class="{'show_me': index === 0}">
        Hello World
    </div>
</template>

<script>
    export default {
        data: function() {
            return {
                index: 0
            }
        }
    }
</script>
update file feature without dependecies with vue
<v-card flat>
    <v-card-title>Meta Tags</v-card-title>
    <v-card-subtitle class="mt-5 mb-n2">Social image</v-card-subtitle>
    <v-responsive>
        <v-img : src="previewImage" class="uploading-image d-block" />
              </v-responsive>
    <input
        type="file"
        id="myFile"
        name="myFile"
        accept="image/*"
                @change="uploadImage"
class="input-file"
/>
              <div class="d-flex justify-center mt-2 mb-3">
        <v-btn small outlined color="indigo darken-3">
            <label for="myFile">Upload your Image</label>
            <v-icon small right color="indigo darken-3">mdi-upload</v-icon>
        </v-btn>
    </div>
</v-card>

    <script>
        uploadImage(e) {
      const image = e.target.files[0];
          const reader = new FileReader();
          reader.readAsDataURL(image);
      reader.onload = e => {
            this.previewImage = e.target.result;
        this.fbImg = this.previewImage;
        this.twitterImg = this.previewImage;
        console.log(this.previewImage);
      };
    },

</script>
Basic axios vuepost request
formSubmit(e) {
                     e.preventDefault();
                     axios.post('/api/addorderres',{
                         name:this.name,
                         mobile:this.mobile,
                         tableno:this.tableno,
                         members:this.members
                     })
                     .then((response)=>{
                       this.number = response.data
                     }).catch((error)=>{
                         console.log(error);
                     });
                 }
Basic Axios http get request in Vuejs
searchProduct(){
                    this.results=[];
                    console.log('System is looking for ..');
                    axios.post('/api/searchitem',{
                        query : this.search,
                    }).then((response)=>{
                        // console.log(response);
                        this.results = response.data;
                    }).catch((error)=>{
                        console.log(error);
                    });
                },
Create New Component Scaffold (.vue)
<template>

</template>

<script>

export default {
  name: 'New Component'
}

<script>

<style scoped>

</style>
Define a new component in Vue.js
Vue.component('component_name', {
    props: ['prop_name'],
    template: '<div class="root"></div>',
    data: function() {
        return {}
    },
    methods: {
    },
    created: function() {
    }
});