Vue Js Reverse Array Tutorial Example

Vue Js Reverse Array Tutorial Example

Vue js reverse array example tutorial. In this tutorial, you will learn how to reverse an array using orderby filter and reverse() function in vue js.

This tutorial will guide you step by step on how to reverser array elements using order by filter and reverse() function in vue js.

How to Reverse Array in Vue js

This tutorial will show you 2 examples of how to reverse array in vue js:

Example 1 – Reverse Array Using Function

See the following example of reverse array using reverse() function in vue js:

<!DOCTYPE html>
<html>
<head>
  <title>Vue Js in Reverse Array Using Function Example - Tutsmake.com</title>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
</head>
<body>
<div id="app">
	<p>item 1 = {{ item1 }}</p>	
	<button @click="myFunction()">Click Me</button>
</div>
<script>
 new Vue({
el: '#app',
  
  data: { 
	  item1:[15, 11, 10, 8, 20, 13]
  },
  
   methods:{
    myFunction: function () {		
		this.item1.reverse();	
    }   
   }

});
</script>        
</body>
</html>

The following code will reverse array using function in vue js:

<script>
 new Vue({
el: '#app',
  
  data: { 
	  item1:[15, 11, 10, 8, 20, 13]
  },
  
   methods:{
    myFunction: function () {		
		this.item1.reverse();	
    }   
   }

});
</script> 

Example 2 – Reverse Array Using v-for OrderBy Filter

See the following example of reverse array using v-for orderBy filter() function vue js:

<!DOCTYPE html>
<html>
<head>
  <title>Vue Js in Reverse Array Using v-for OrderBy Filter Example - Tutsmake.com</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-7 offset-md-3">
      <div class="card mt-5">
        <div class="card-header">
          <h5>Vue Js in Reverse Array Using v-for OrderBy Filter Example - Tutsmake.com</h5>
        </div>
        <div class="card-body">
          <div class="row">
            <div class="col-md-12">
              <ul>
                <li v-for="item in items | reverse" v-text="item.message"></li>
              </ul>
            </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: 'Java' },
           { message: '.Net'},
           { message: 'C'},
           { message: 'C#'},
           { message: 'Python'},
      ],
    },
    filters: {
      reverse(items) {
        return items.slice().reverse()
      }
    }
  });
</script>
</body>
</html>  

The following code will reverse array using v-for orderBy filter() in vue js:

<script>
  Vue.config.devtools = true
  var app = new Vue({
    el:'.card-body',
    data:{
      items:[
           { message: 'Java' },
           { message: '.Net'},
           { message: 'C'},
           { message: 'C#'},
           { message: 'Python'},
      ],
    },
    filters: {
      reverse(items) {
        return items.slice().reverse()
      }
    }
  });
</script>

Conclusion

Vue js reverse array example tutorial. In this tutorial, you have learned how to reverse an array using orderby filter and reverse() function in vue js.

Recommended VUE JS Tutorials

AuthorAdmin

Greetings, I'm Devendra Dode, a full-stack developer, entrepreneur, and the proud owner of Tutsmake.com. My passion lies in crafting informative tutorials and offering valuable tips to assist fellow developers on their coding journey. Within my content, I cover a spectrum of technologies, including PHP, Python, JavaScript, jQuery, Laravel, Livewire, CodeIgniter, Node.js, Express.js, Vue.js, Angular.js, React.js, MySQL, MongoDB, REST APIs, Windows, XAMPP, Linux, Ubuntu, Amazon AWS, Composer, SEO, WordPress, SSL, and Bootstrap. Whether you're starting out or looking for advanced examples, I provide step-by-step guides and practical demonstrations to make your learning experience seamless. Let's explore the diverse realms of coding together.

Leave a Reply

Your email address will not be published. Required fields are marked *