Develop Reference

VueJs: how to create data depending on the order of the components

In VueJs, I need to be able to compute a quantity which depends on the order of the components in a table:
<mySlides>
<componentTableOfContent></componentTableOfContent>
<componentA my-title="First title" pages="5">Blabla</componentA>
<componentB my-title="Second title" pages="2">Bleble</componentA>
<componentC my-title="Third title" pages="4">Blibli</componentA>
<mySlides>
Should produce something as following:
Table of content:
- First title, pages 1-5
- Second title, pages 6-7
- Third title, pages 8-12
# First title, page 1
Blabla
# Second title, page 6
Bleble
# Third title, page 8
Blibli
Do you know how I could do that?
Note that I don't want to specify in each component its absolute position for the sake of maintainability. Ideally, the method should work irrespective of the time to load each component, and would get updated if some components are dynamically added.
EDIT I'm wondering if list of slots could not help with this task How to render a list of static content with Vue named slot? but if so I'm not yet sure to see how to use them in vue 3

prevent applying previous page CSS to next page when it navigates with ajax pagination

I've written a messages table and I get it's data to show in my site with Vue-js + Axios , I also use pagination , if a row will be unread I show it with Bold stylesheet afetr reading it's CSS will be clean.
in page 1 everything is okay, but when i want to navigate to next page current page stylesheet transfers to next page and i don't want to send previous page effects to next page.
For example:
Second row of First page is unread with Bold tag
And
Second row of Second page is also unread
when I read Second row of First page it's Bold tag will removed
and when I navigate to next page I see Second row of Second page is also read ( without any Bold tag)
everything is ok in Database but when table will be render and navigate in front end table css property transfer among pages!!
I've used vue js 2.5 + laravel + axios
<tbody id="tbody_1">
<tr v-for="(item, index) in items" :class="[ item.is_read == 0 ? 'bold' : '']" :id="'rowId'+item.id">
<td #click="editItem(item.id)">#{{ item.subject }}</td>
</tr>
editItem: function(id){
var self = this;
axios.get(self.ApiUrl+'/'+id+'/edit').then(function (response) {
$('tr#rowId'+id).removeClass('bold');
});
},

html rendering time improvement with jquery datatable

I had implemented datatable with almost 3000 row of data and it was taking like 4 to 5 seconds to render the HTML by this code:
$('#book_table').html(book_table);
$('#book_table > table').DataTable({...data table initializing});
when I was trying to improve rendering time I tried to hide the HTML data container element (display: none) then show it after datatable initializing and the result was shocked it took just 200 ms for rendering by this code
$('#book_table').addClass('hidden');
$('#book_table').html(book_table);
$('#book_table > table').DataTable({...data table initializing});
$('#book_table').removeClass('hidden');
the question is : how could hiding the data container and showing it after datatable initializing could improve the rendering time from 4 seconds to 200 ms?

with out reloading the total content when I click on the menu

I am using asp.net MVC with razor.
In my application,I have a main menu in the layout page.
In each Page,i have given this layout page to display menu in each page like,
#{
Layout = "~/Views/Shared/_Layout.cshtml";
}
With this,When I select an item in the menu the total page is reloading,
what i want is when I select item in the menu,the content will only change with out disturbing the menu.can u tell me how to do this?
I have defined menu like
<div id="menu" style="width:80%;"></div>
<script type='text/javascript'>
$("#menu").kendoMenu({
dataSource: [
{
text: Home,
encoded: false,
url:'#Url.Action("Index","Home")'
},
{
text: "<a href='#Url.Action("About","Home")'>About</a>",
encoded: false,
}]
</script>

You have to create an Ajax UI to accomplish this. The menu you're showing is rendering anchor tags which will indeed cause full page loads.
One other option is to come up with a scheme to maintain the state of the menu across page loads (i.e. make the nav points be controlled by rendered pages)

Jeasyui DataGrid Pagination is not working properly

I have a datagrid which fetches data from DB as "rows" and "total" and assigned to easy-ui Datagrid by url which works fine. But, adding Pagination using data-option="pagination:true" adds pagination toolbar but it list all entries by default it should show only 10 records whereas it listing all the records.
What will be the fix for this??
Action
Name
Privilege

You need to do this:
$('#dgMyTreeGrid').treegrid({
pagination:true,
pageSize:10, (or 20 etc. multiples of 10)
...