Home > Vue.Js > How to use v-for loop in Vue js



How to use v-for loop in Vue js

In this article, we have described how to use a v-for loop in Vue js with example code. Vue js start from an object and HTML element id and data.


In this article, we have described how to use a v-for loop in Vue js with example code.

vue js start from a object and html element id and data . In vue js uses double braces {{ }} and also uses prefix v- which is represent the vue js symbol.

 

Required Namespaces:

We must use the following namespaces.

using Newtonsoft.Json;

using System.Web.Services;

Script

we have described below about script you can have a look at it and learn below.

<script>

    var app = new Vue({

        el: '#app',

        data: {

            UsersData: []

        },

        created: function () {

            let cobject = this; // here stored currect instance

            $.ajax({

                type: "POST",

                url: "vuejs.aspx/getData",

                data: '{}',

                contentType: "application/json; charset=utf-8",

                dataType: "json",

                success: function (data) {

                    cobject.UsersData = JSON.parse(data.d);

                }

            });

        }

    })

</script>

The most basic form of data binding in table and list of items using double curly braces.

vue.js is a progressive framework for building user interfaces which are used for two way bind.

Vue.js is a lightweight alternative to other Javascript frameworks like AngularJS.

You can have a look at it and learn.

 

HTML

<html>

<head runat="server">

 <title></title>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

</head>

<body>

    <form id="form2" runat="server">

        <div>

            <div id="app">

                <table class="table table-bordered">

                    <thead>

                        <tr>

                            <th>Id</th>

                            <th>Name</th>

                            <th>role</th>

                        </tr>

                    </thead>

                    <tbody>

                        <tr v-for="users in UsersData">

                            <td>{{users.id }}</td>

                            <td>{{users.Name }}</td>

                            <td>{{users.role }}</td>

                        </tr>

                    </tbody>

                </table>

            </div>

        </div>

    </form>

</body>

</html>

C#

We have explained below C# code and added the examples of some user information in this article .You can have a look at it and learn.

[WebMethod]

public static string getData()

{

    List<Users> Users = new List<Users>();

    Users.Add(new Users

    {

        id = 1,

        Name = "Rjboy",

        role = "Admin"

    });

 

    Users.Add(new Users

    {

        id = 2,

        Name = "Peter",

        role = "View-Admin"

    });

 

    Users.Add(new Users

    {

        id = 3,

        Name = "John",

        role = "Member"

 

    });

 

    return JsonConvert.SerializeObject(Users);

}

 

public class Users

{

    public int id { get; set; }

    public string Name { get; set; }

    public string role { get; set; }

 

}




Note: All contents are copyright of their authors.



Comments



Leave a Reply

Comment:*
Email ID:*


Name:*