15 Apr 2021

Vuejs : List Rendering

Well, I have again come with interesting thing about Vue js. Today i will learn about How to render to list items (Javascript Array Object).

Simple List Rendering in Vuejs

it is an example of simple List Rendering under the Vue.

    <div id="app">

        <li v-for="item in items" v-bind:key="">



let vm = new Vue({

   el : "#app",
   data : {

       items : ["Boostrap", "Jquery", "Framer-motion"]

Array itrate with (item & index)

Vue list rendering with item and its index of Array.

  <ul id="ul">

        <li v-for="(item,index) in items">

        {{index}}  :   {{item}}


  • 0 : Boostrap
  • 1 : Jquery
  • 2 : Framer-motion

Iterating Js Object for keys

Vuejs have ability to iterate over javascript object for keys and values also.
whenever you itrate an js object, vue provides (value/key, name, index ) like parameter for Object.


        <li v-for="(value, name, index) in author">

        {{name}} :- {{value}}




  var vm = new Vue({
  el : "#root",
  data : {
  author : { 
        name : "Ashutosh Kumar",
        nationality : "India"

∆ Preview ∆

  • name :- Ashutosh Kumar
  • nationality :- India
While you itrate an js object for value, internally it uses Object.keys() static method to get list of keys as an Array from JS object.


No comments:

No Comments