vue js Archives - Codeplaners https://codeplaners.com/tag/vue-js/ Code Solution Thu, 20 Jan 2022 09:47:54 +0000 en-US hourly 1 https://wordpress.org/?v=6.1.7 https://codeplaners.com/wp-content/uploads/2020/09/cropped-favicon-social-32x32.png vue js Archives - Codeplaners https://codeplaners.com/tag/vue-js/ 32 32 Download File using Axios In Vue JS https://codeplaners.com/download-file-using-axios-in-vue-js/ https://codeplaners.com/download-file-using-axios-in-vue-js/#respond Thu, 20 Jan 2022 09:47:54 +0000 https://codeplaners.com/?p=1390 Hi Dev, Today, i we will show you download file using axios in vue js. This article will give you simple example of download file using axios in vue js. you will download file using axios in vue js. In this article, we will implement a download file using axios in vue js. So let’s … Continue reading "Download File using Axios In Vue JS"

The post Download File using Axios In Vue JS appeared first on Codeplaners.

]]> Hi Dev,

Today, i we will show you download file using axios in vue js. This article will give you simple example of download file using axios in vue js. you will download file using axios in vue js. In this article, we will implement a download file using axios in vue js.

So let’s follow few step to create example of download file using axios in vue js.

Example

<!DOCTYPE html>
<html>
<head>
    <title>Download File using Axios In Vue JS </title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js" ></script>
</head>
<body>
<div id="app">
  <button @click="onClick()">DownLoad</button>
</div>
<script type="text/javascript">
   
    var app = new Vue({
      el: '#app',
      methods: {
          onClick() {
            axios({
                  url: 'http://localhost:8000/my.pdf',
                  method: 'GET',
                  responseType: 'blob',
              }).then((response) => {
                   var fileURL = window.URL.createObjectURL(new Blob([response.data]));
                   var fileLink = document.createElement('a');

                   fileLink.href = fileURL;
                   fileLink.setAttribute('download', 'file.pdf');
                   document.body.appendChild(fileLink);

                   fileLink.click();
              });
          }
      }
    })
</script>
</body>
</html>

I hope it will assist you…

The post Download File using Axios In Vue JS appeared first on Codeplaners.

]]> https://codeplaners.com/download-file-using-axios-in-vue-js/feed/ 0 How To Add Class To Element On Clicked In Vue Js https://codeplaners.com/how-to-add-class-to-element-on-clicked-in-vue-js/ https://codeplaners.com/how-to-add-class-to-element-on-clicked-in-vue-js/#respond Sun, 15 Aug 2021 00:24:07 +0000 https://codeplaners.com/?p=1236 Hi, Today, i we will show you how to add class to element on clicked in Vue Js. This article will give you simple example of how to add class to element on clicked in Vue Js. you will learn how to add class to element on clicked in Vue Js. So let’s follow few … Continue reading "How To Add Class To Element On Clicked In Vue Js"

The post How To Add Class To Element On Clicked In Vue Js appeared first on Codeplaners.

]]> Hi,

Today, i we will show you how to add class to element on clicked in Vue Js. This article will give you simple example of how to add class to element on clicked in Vue Js. you will learn how to add class to element on clicked in Vue Js.

So let’s follow few step to create example of how to add class to element on clicked in Vue Js.

How To Add Class To Element On Clicked In Vue Js

Example:

<!DOCTYPE html>
<html>
<head>
  <title>How To Add Class To Element On Clicked In Vue Js</title>
  <style>
   .newClass
    {
      box-shadow: 0px 0px 5px #000; 
      background-color: green;
      color: #fff;
      padding: 3px 5px;
    }
  </style>
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.0-alpha1/css/bootstrap.min.css">
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body class="bg-dark">
  <div class="container">
    <div class="col-md-5 offset-md-3">
      <div class="card mt-5">
        <div class="card-header">
          <h5>How To Add Class To Element On Clicked In Vue Js</h5>
        </div>
        <div class="card-body">
          <div class="row">
            <div class="col-md-12">
              <div id="app">
                  <button v-on:click="addClass" :class="{'newClass': isAddClass}" class="btn-block">
                      Click Me
                  </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.18/vue.min.js"></script>
<script>
Vue.config.devtools = true
var vm = new Vue({
    el: '#app',
    data: {
        isAddClass: false,
    },
    methods: {
            addClass: function() {
                this.isAddClass = true;
        }
    }
});
</script>
</body>
</html>

I hope it will assist you…

The post How To Add Class To Element On Clicked In Vue Js appeared first on Codeplaners.

]]> https://codeplaners.com/how-to-add-class-to-element-on-clicked-in-vue-js/feed/ 0 How To Delete Element Array Reactively In Vue Js https://codeplaners.com/how-to-delete-element-array-reactively-in-vue-js/ https://codeplaners.com/how-to-delete-element-array-reactively-in-vue-js/#respond Sun, 15 Aug 2021 00:13:05 +0000 https://codeplaners.com/?p=1232 Hi, Today, i we will show you how to delete element array reactively in Vue Js. This article will give you simple example of how to delete element array reactively in Vue Js. you will learn how to delete element array reactively in Vue Js. So let’s follow few step to create example of how … Continue reading "How To Delete Element Array Reactively In Vue Js"

The post How To Delete Element Array Reactively In Vue Js appeared first on Codeplaners.

]]> Hi,

Today, i we will show you how to delete element array reactively in Vue Js. This article will give you simple example of how to delete element array reactively in Vue Js. you will learn how to delete element array reactively in Vue Js.

So let’s follow few step to create example of how to delete element array reactively in Vue Js.

How To Delete Element Array Reactively In Vue Js

Example:

<!DOCTYPE html>
<html>
<head>
  <title>How To Delete Element  Array Reactively In Vue Js </title>
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.0-alpha1/css/bootstrap.min.css">
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body class="bg-dark">
  <div class="container">
    <div class="col-md-6 offset-md-3">
      <div class="card mt-5">
        <div class="card-header">
          <h5 v-bind:class="red">How To Delete Element  Array Reactively In Vue Js </h5>
        </div>
        <div class="card-body">
          <div class="row">
            <div class="col-md-12">
              <ul>
                <li v-for="item in items" v-text="item.message"></li>
              </ul>
              <button class="btn btn-outline-primary" @click="deleteFirst">
                Delete First
              </button>
              <button class="btn btn-outline-danger" @click="deleteLast">
                Delete Last
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.18/vue.min.js"></script>
<script>
  Vue.config.devtools = true
  var app = new Vue({
    el:'.card-body',
    data:{
      items:[
           { message: 'Php' },
           { message: 'Laravel'},
           { message: 'Java'},
           { message: 'Html'},
      ],
    },
      methods: {
        deleteFirst() {
          this.items.shift();
          // delete last
        },
        deleteLast() {
          this.items.pop();
          // delete last
        }
      }
  })
</script>
</body>
</html>

I hope it will assist you…

The post How To Delete Element Array Reactively In Vue Js appeared first on Codeplaners.

]]> https://codeplaners.com/how-to-delete-element-array-reactively-in-vue-js/feed/ 0 How To Call Function On Load in Vue JS https://codeplaners.com/how-to-call-function-on-load-in-vue-js/ https://codeplaners.com/how-to-call-function-on-load-in-vue-js/#respond Sun, 15 Aug 2021 00:02:39 +0000 https://codeplaners.com/?p=1227 Hi, Today, i we will show you how to call function on load in vue js. This article will give you simple example of how to call function on load in vue js. you will learn how to call function on load in vue js. So let’s follow few step to create example of how … Continue reading "How To Call Function On Load in Vue JS"

The post How To Call Function On Load in Vue JS appeared first on Codeplaners.

]]> Hi,

Today, i we will show you how to call function on load in vue js. This article will give you simple example of how to call function on load in vue js. you will learn how to call function on load in vue js. So let’s follow few step to create example of how to call function on load in vue js.

Example:

<!DOCTYPE html>
<html>
<head>
    <title>How To Call Function On Load in Vue JS </title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
  {{ message }}
</div>
<script type="text/javascript">
    var app = new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue!'
      },
      methods:{
            myFunctionOnLoad: function() {
            console.log('call on load...');
        }
      },
      created: function(){
        this.myFunctionOnLoad()
      }
    })
</script>
</body>
</html>

I hope it will assist you…

The post How To Call Function On Load in Vue JS appeared first on Codeplaners.

]]> https://codeplaners.com/how-to-call-function-on-load-in-vue-js/feed/ 0 How to Use declare global variable in Vue JS https://codeplaners.com/how-to-use-declare-global-variable-in-vue-js/ https://codeplaners.com/how-to-use-declare-global-variable-in-vue-js/#respond Mon, 28 Jun 2021 23:49:57 +0000 https://codeplaners.com/?p=1042 Today, i we will show you how to use declare global variable in Vue JS. This article will give you simple example of how to use declare global variable in Vue JS. you will learn how to use declare global variable in Vue JS. So let’s follow few step to create example of how to … Continue reading "How to Use declare global variable in Vue JS"

The post How to Use declare global variable in Vue JS appeared first on Codeplaners.

]]> Today, i we will show you how to use declare global variable in Vue JS. This article will give you simple example of how to use declare global variable in Vue JS. you will learn how to use declare global variable in Vue JS. So let’s follow few step to create example of how to use declare global variable in Vue JS.

Example

<!DOCTYPE html>
<html>
<head>
    <title>How to Use declare global variable in Vue JS</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
    
<div id="app">
    
  <p>Result : {{myResult}}</p>
  <button @click="clickFunction()">Click Me</button>
    
</div>
   
<script type="text/javascript">
    Vue.mixin({
      data: function() {
        return {
          myGlobalVar:'this is my Codeplaners.com'
        }
      }
    })
 
    var app = new Vue({
      el: '#app',
      data: {
        myResult: ''
      },
      methods:{
        clickFunction: function () {   
            this.myResult = this.myGlobalVar;
        }
      }
    })
    
</script>
</body>
</html>

Output

Result : this is my Codeplaners.com

The post How to Use declare global variable in Vue JS appeared first on Codeplaners.

]]> https://codeplaners.com/how-to-use-declare-global-variable-in-vue-js/feed/ 0 Vue JS Get Array Length Or Object Length Example https://codeplaners.com/vue-js-get-array-length-or-object-length-example/ https://codeplaners.com/vue-js-get-array-length-or-object-length-example/#respond Mon, 28 Jun 2021 23:30:53 +0000 https://codeplaners.com/?p=1037 Today, i we will show you vue js get array length or object length example. This article will give you simple example of vue js get array length or object length example. you will learn vue js get array length or object length example. So let’s follow few step to create example of vue js … Continue reading "Vue JS Get Array Length Or Object Length Example"

The post Vue JS Get Array Length Or Object Length Example appeared first on Codeplaners.

]]> Today, i we will show you vue js get array length or object length example. This article will give you simple example of vue js get array length or object length example. you will learn vue js get array length or object length example. So let’s follow few step to create example of vue js get array length or object length example.

Preview:
vue js get array length or object length example

Example

<!DOCTYPE html>
<html>
<head>
    <title>Vue JS Get Array Length Or Object Length Example</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
   
<div id="app">
   
  <ul id="exampleApp">
    <li v-if="myArray.length">Object Length = {{ myArray.length }}</li>
    <li v-for="value in myArray">
      {{ value.category }}
    </li>
  </ul>
  
</div>
  
<script type="text/javascript">
  
    var app = new Vue({
      el: '#app',
      data: {
        myArray: [
          { category: 'Laravel' },
          { category: 'PHP' },
          { category: 'Wordpress' },
          { category: 'Codeigniter' }
        ]
      }
    })
  
</script>
  
</body>
</html>

The post Vue JS Get Array Length Or Object Length Example appeared first on Codeplaners.

]]> https://codeplaners.com/vue-js-get-array-length-or-object-length-example/feed/ 0 Vue JS Get Array And Object Length https://codeplaners.com/vue-js-get-array-and-object-length/ https://codeplaners.com/vue-js-get-array-and-object-length/#respond Fri, 21 May 2021 02:48:01 +0000 https://codeplaners.com/?p=808 Hello Dev, Today, i we will show you Vue JS Get Array And Object Length. This article will give you simple example of Vue JS Get Array And Object Length. you will learn Vue JS Get Array And Object Length. If you don’t know how to get array and object length in vue js. i … Continue reading "Vue JS Get Array And Object Length"

The post Vue JS Get Array And Object Length appeared first on Codeplaners.

]]> Hello Dev,

Today, i we will show you Vue JS Get Array And Object Length. This article will give you simple example of Vue JS Get Array And Object Length. you will learn Vue JS Get Array And Object Length.

If you don’t know how to get array and object length in vue js. i will give simple example for vue js get array and object length. If you have worked on Javascript and Jquery then you know you can get array length by variable. length so same way you can get array length or object length in vue js application.

So let’s follow few step to create example of Vue JS Get Array And Object Length.

Example:-

<!DOCTYPE html>
<html>
<head>
    <title>Vue JS Get Array Length Or Object Length Example - ItSolutionStuff.com</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
   
<div id="app">
   
  <ul id="exampleApp">
    <li v-if="myArray.length">Object Length = {{ myArray.length }}</li>
    <li v-for="value in myArray">
      {{ value.category }}
    </li>
  </ul>
  
</div>
  
<script type="text/javascript">
  
    var app = new Vue({
      el: '#app',
      data: {
        myArray: [
          { category: 'Laravel' },
          { category: 'PHP' },
          { category: 'Codeigniter' }
        ]
      }
    })
  
</script>
  
</body>
</html>

Output:- Object Length = 3
Laravel
PHP
Codeigniter

The post Vue JS Get Array And Object Length appeared first on Codeplaners.

]]> https://codeplaners.com/vue-js-get-array-and-object-length/feed/ 0 Vue JS Multiple Select Dropdown https://codeplaners.com/vue-js-multiple-select-dropdown/ https://codeplaners.com/vue-js-multiple-select-dropdown/#respond Tue, 18 May 2021 10:24:53 +0000 https://codeplaners.com/?p=730 Hello Dev, Today, i we will show you Vue JS Multiple Select Dropdown Example. This article will give you simple example of Vue JS Multiple Select Dropdown Example. you will learn Vue JS Multiple Select Dropdown Example. So let’s follow few step to create example of Vue JS Multiple Select Dropdown Example. You need to … Continue reading "Vue JS Multiple Select Dropdown"

The post Vue JS Multiple Select Dropdown appeared first on Codeplaners.

]]> Hello Dev,

Today, i we will show you Vue JS Multiple Select Dropdown Example. This article will give you simple example of Vue JS Multiple Select Dropdown Example. you will learn Vue JS Multiple Select Dropdown Example. So let’s follow few step to create example of Vue JS Multiple Select Dropdown Example.

You need to just follow few steps to add Multiple Select Dropdown, so let’s see.

Step 1:- Create Vue App

vue create myApp

Step 2:- Install vue-multiselect Package

npm install vue-multiselect

Step 3:- Updated HelloWorld Component

src/components/HelloWorld.vue

<template>
  <div>
    <h1>Vue JS Multiple Select Dropdown</h1>
    <multiselect
      v-model="selected"
      :multiple="true"
      :options="options">
    </multiselect>
  </div>
</template>    
<script>
  import Multiselect from 'vue-multiselect'
  export default {
    components: { Multiselect },
    data () {
      return {
        selected: null,
        options: ['Laravel', 'Laravel 8', 'Vue JS', 'codeplaners.com']
      }
    }
  }
</script>
<style src="vue-multiselect/dist/vue-multiselect.min.css">

npm run serve

You can see officially docs from here: vue-multiselect.js.org.

The post Vue JS Multiple Select Dropdown appeared first on Codeplaners.

]]> https://codeplaners.com/vue-js-multiple-select-dropdown/feed/ 0 Vue JS Sweet Alert Example https://codeplaners.com/vue-js-sweet-alert-example/ https://codeplaners.com/vue-js-sweet-alert-example/#respond Tue, 18 May 2021 10:09:17 +0000 https://codeplaners.com/?p=726 Hello Developer, Today, i we will show you Vue JS Sweet Alert Example. This article will give you simple example of Vue JS Sweet Alert Example. you will learn Vue JS Sweet Alert Example. So let’s follow few step to create example of Vue JS Sweet Alert Example. You need to just follow few steps … Continue reading "Vue JS Sweet Alert Example"

The post Vue JS Sweet Alert Example appeared first on Codeplaners.

]]> Hello Developer,

Today, i we will show you Vue JS Sweet Alert Example. This article will give you simple example of Vue JS Sweet Alert Example. you will learn Vue JS Sweet Alert Example. So let’s follow few step to create example of Vue JS Sweet Alert Example.

You need to just follow few steps to add sweetalert, so let’s see.

Step 1:- Create Vue App

vue create myApp

Step 2:- Install vue-sweetalert2 Package

npm install -S vue-sweetalert2

Step 3:- Use vue-sweetalert2

src/main.js

import Vue from 'vue'
import App from './App.vue'
import VueSweetalert2 from 'vue-sweetalert2';
Vue.config.productionTip = false
Vue.use(VueSweetalert2);

    
new Vue({
  render: h => h(App),
}).$mount('#app')

Step 4:- Updated HelloWorld Component

src/components/HelloWorld.vue

<template>
  <div class="container">
    <div class="large-12 medium-12 small-12 cell">
        <h1>Vue JS Sweet Alert Example - codeplaners.com</h1>
        <button v-on:click="showAlert">Hello world</button>
        <button v-on:click="showAlertConfirm">Confirm Me</button>
    </div>
  </div>
</template>

<script>
  export default {
    methods: {
        showAlert(){
            this.$swal('Hello Vue world!!!');
        },
        showAlertConfirm(){
            this.$swal({
              title: 'Are you sure?',
              text: "You won't be able to revert this!",
              type: 'warning',
              showCancelButton: true,
              confirmButtonColor: '#3085d6',
              cancelButtonColor: '#d33',
              confirmButtonText: 'Yes, delete it!'
            }).then((result) => {
              if (result.value) {
                this.$swal(
                  'Deleted!',
                  'Your file has been deleted.',
                  'success'
                )
              }
            });
        }
    }
  }

</script>

npm run serve

The post Vue JS Sweet Alert Example appeared first on Codeplaners.

]]> https://codeplaners.com/vue-js-sweet-alert-example/feed/ 0 Selected Option Text Example In Vue JS https://codeplaners.com/selected-option-text-example-in-vue-js/ https://codeplaners.com/selected-option-text-example-in-vue-js/#respond Sat, 08 May 2021 00:10:18 +0000 https://codeplaners.com/?p=634 In this article, we will show you selected option text example in vue js. This article will give you simple example of selected option text example in vue js. we can easily selected option text example in vue js. In this example, we will take a simple dropdown with some options like laravel, php, codeigniter, … Continue reading "Selected Option Text Example In Vue JS"

The post Selected Option Text Example In Vue JS appeared first on Codeplaners.

]]> In this article, we will show you selected option text example in vue js. This article will give you simple example of selected option text example in vue js.

we can easily selected option text example in vue js. In this example, we will take a simple dropdown with some options like laravel, php, codeigniter, etc. when you select it. we will selected option text example in vue js.

Example:-

<!DOCTYPE html>
<html>
<head>
    <title>Selected Option Text Example In Vue JS  - codeplaners.com</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
    
<div id="app">
    
  <select name="category_id" @change="onChange($event)" class="form-control">
     <option>--- Select Category ---</option>
     <option value="1">PHP</option>
     <option value="2">Laravel</option>
     <option value="3">Codeigniter</option>
     <option value="4">Vue JS</option>
     <option value="5">Angular JS</option>
  </select>
    
</div>
    
<script type="text/javascript">
    
    var app = new Vue({
      el: '#app',
      methods: {
          onChange(event) {
              var optionValue = event.target.value;
              var optionText = event.target.options[event.target.options.selectedIndex].text;
              
              console.log(optionText);
              console.log(optionValue);
          }
      }
    })
    
</script>
     
</body>
</html>

The post Selected Option Text Example In Vue JS appeared first on Codeplaners.

]]> https://codeplaners.com/selected-option-text-example-in-vue-js/feed/ 0