June 04 2021 by
Admin
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.