Vue js reverse array example; Through this tutorial, i am going to show you how to reverse an array using orderby filter and reverse() function in vue js.
How to Reverse Array in Vue js
Now, i 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 - Laratutorials.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 - Laratutorials.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 - Laratutorials.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
Recommended:-Vue Js If Else Condition Example
Recommended:-Vue Js For Loop (v-for) Example
Recommended:-Vue JS Ajax Form Submit Tutorial
Recommended:-Vue Js Add Class To Element On Click Tutorial
Recommended:-Vue JS Checkbox Checked Event Tutorial
Recommended:-Vue Js Get Current Date and Time
Recommended:-How to Add and Use Bootstrap Modal in Vue Js App
Recommended:-Vue JS Download File using Axios App
Recommended:-Laravel 8 Vue JS Axios Post Request Tutorial Example
Recommended:-How to Show Flash Message Using Vue JS in Laravel 8
Recommended:-How to Create Laravel 8 Vue JS Like Dislike System
Recommended:-Laravel 8 Vue JS Image/File Upload Tutorial Example