Search code snippets, questions, articles...

vuejs code snippets

Navigate to Page with parameters
window.location.href = "/pagename/" + parameter;
How to Check If a Value Exists in an Array
<script>    
    var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"];
    alert(fruits.includes("Banana")); // Outputs: true
    alert(fruits.includes("Coconut")); // Outputs: false
    alert(fruits.includes("Orange")); // Outputs: true
    alert(fruits.includes("Cherry")); // Outputs: false
</script>

<script>    
    var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"];

    // Check if a value exists in the fruits array
    if(fruits.indexOf("Mango") !== -1){
        alert("Value exists!")
    } else{
        alert("Value does not exists!")
    }
</script>
How to Check If an Array Includes an Object
<script>
// An array of objects
var persons = [{name: "Harry"}, {name: "Alice"}, {name: "Peter"}];

// Find if the array contains an object by comparing the property value
if(persons.some(person => person.name === "Peter")){
    alert("Object found inside the array.");
} else{
    alert("Object not found.");
}
</script>
How to reload/refresh a webpage
<template>
  <button @click="reloadPage">Reload</button>
</template>


<script>
export default {
  ...
  methods: {
    reloadPage() {
      this.$router.go();
    }
  }
}
</script>
allows keeping the URL while rendering a different page
beforeEnter(to, from){
//super code goes here
return {
        name: 'NotFound',
        // allows keeping the URL while rendering a different page
        params: { pathMatch: to.path.split('/').slice(1) },
        query: to.query,
        hash: to.hash,
      }
}
Remove decimal points in numbers
Math.trunc(inputnumber) //truncate fractional part, also see below
Math.floor(inputnumber) //round down
Math.ceil(inputnumber) //round up
Math.round(inputnumber) //round to nearest integer
Run VueJs Server/Project
npm run serve
murata vue.js 公式ドキュメント
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    

    <div id="app">
        app1
        {{ message }}
      </div>


      <div id="app-2">
          app2
        <span v-bind:title="message">
          Hover your mouse over me for a few seconds
          to see my dynamically bound title!
        </span>
      </div>

      <div id="app-3">
          app3
        <span v-if="seen">Now you see me</span>
      </div>


      <div id="app-4">
          app4
        <ol>
          <li v-for="todo in todos">
            {{ todo.text }}
          </li>
        </ol>
      </div>
      
      <div id="app-5">
          app5
        <p>{{ message }}</p>
        <button v-on:click="reverseMessage">Reverse Message</button>
      </div>


      <div id="app-6">
          app6
        <p>{{ message }}</p>
        <input v-model="message">
      </div>



      <div id="app-7">
          app7
        <ol>
          <!--
            Now we provide each todo-item with the todo object
            it's representing, so that its content can be dynamic.
            We also need to provide each component with a "key",
            which will be explained later.
          -->
          <mitsu-item
            v-for="item in groceryList"
            v-bind:mitsutodo="item"
            v-bind:key="item.idmitsu"
          ></mitsu-item>
        </ol>
      </div>





    <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

<script>
    var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello mitsu!'
  }
})



var app2 = new Vue({
  el: '#app-2',
  data: {
    message: 'You loaded this page on ' + new Date().toLocaleString()
  }
})

var app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true
  }
})


var app4 = new Vue({
  el: '#app-4',
  data: {
    todos: [
      { text: 'Learn JavaScript' },
      { text: 'Learn Vue' },
      { text: 'Build something awesome' }
    ]
  }
})


var app5 = new Vue({
  el: '#app-5',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})


var app6 = new Vue({
  el: '#app-6',
  data: {
    message: 'Hello Vue!'
  }
})


Vue.component('mitsu-item', {
  props: ['mitsutodo'],
  template: '<li>{{ mitsutodo.nakami }}</li>'
})

var app7 = new Vue({
  el: '#app-7',
  data: {
    groceryList: [
      { idmitsu: 0, nakami: 'Vegetables' },
      { idmitsu: 1, nakami: 'Cheese' },
      { idmitsu: 2, nakami: 'Whatever else humans are supposed to eat' }
    ]
  }
})



</script>



</body>
</html>
Loop through object on template Vuejs
//If OBJECT IS AS BELOW
const fruits = {
    "name": "Mango",
    "color": "Yellow",
    "taste": "sweet",
    "quantity": 10
};

<div v-for="(value, key) in fruits" :key="key">
    <div>{{ key }} - {{value}}</div>
</div>
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() {
    }
});