I have an administrator view which can display a list of users. Complete list is about 3000 entries. I have pagination enabled by default to 100 users/page, but the admin has the option to display all of them at once.
When 100 users are displayed, everything is fine, but when all 3k are displayed the page becomes sluggish (e.g. if i try to sort a column, it'll take 3-4 seconds to sort them) and I understand there's not much I can do about the response time. I'm using lodash OrderBy method for sorting.
My question is, is there a way to have VueJS rendering the list asynchronously, so if I click sort by Name, then immediately sort by Level, it will cancel the existing sorting operation and start a new one?
Here's a sample code (it doesn't work obviously, i just made it up to illustrate my point):
<template>
<div class="container">
<div class="row">
<div class="col-3" #click="setSort('name')">
Name
</div>
<div class="col-3" #click="setSort('level')">
Level
</div>
</div>
<div class="row" v-for="u in sortedUsers">
<div class="col-3">
{{u.name}}
</div>
<div class="col-3">
{{u.level}}
</div>
</div>
</div>
</template>
<script>
export default {
data: () => ({
users: []
,orderCol:'name'
,orderDir:'asc'
})
,computed : {
sortedUsers () {
return _.orderBy(this.users,this.orderCol,this.orderDir);
}
}
,methods : {
setSort(col){
this.orderCol = col;
this.orderDir = (this.orderDir=='asc') ? 'desc' : 'asc';
}
}
,mounted () {
this.$post('/getusers')
.then((data) => {//assume data is in this format:
// [{'name':'test1', 'level':'admin'}, {'name':'test2','level':'user'}, and so on]
this.users = data;
});
}
};
</script>
The answer is no. There is no way to render all 3000 items async.
Ordering is fast, rendering is slow. Even though you can speed up ordering by laravel or any other app it will not help you to render quicker. You can't speed up rendering by async as I know.
Some links:
https://github.com/vuejs/vue/issues/441
Try to use short list with for example 100 items + pagination (local, just offset for v-for).
vue-virtual-scroller is also interesting if your list of items has fixed height. (Demo)
Related
I am using vue js 2.5.17 and vue router as front end and laravel as back end. I have a table with over 1000 record so before it shows I want to use a spinner or loader to show the progress. I have managed to use spinner-grow from bootstrap but it keeps showing even when the data is displayed. What I am doing wrong.
In the template I have this:
<div v-show="isloading=true" >
<div class="spinner-grow" role="status">
<span class="sr-only">Loading...</span>
</div>
In data if I have
isloading:true,
In my method i have
loadUser(){
axios.get("api/customer").then((
{data})=>(
this.users=data));
this.isloading=false;
console.log(this.isloading);
},
I think you could try something like this
data() {
return {
isloading: false, // default value
};
},
<div v-show="isloading" >
<div class="spinner-grow" role="status">
<span class="sr-only">Loading...</span>
</div>
loadUser(){
this.isloading=true; // make it true to show the loading
axios.get("api/customer").then((
{data})=>(this.users=data));
this.isloading=false; // then hide it here
console.log(this.isloading);
},
try change this <div v-show="isloading=true" > to this <div v-if="isloading" >
I have two components, Carousel.vue and Showcase.vue. I'm testing them both in a page like this:
<template>
<main>
<app-showcase
before-focus-class="app-showcase__element--before-focus"
after-focus-class="app-showcase__element--after-focus"
>
<div class="test-showcase" v-for="n in 10" :key="n">
<img
class="u-image-cover-center"
:src="`https://picsum.photos/1000/1000?random=${n}`"
alt=""
/>
<div>Showcase numero {{ n }}</div>
</div>
</app-showcase>
<div class="u-layout--main u-margin-vertical--4">
<div>
<app-button #click="changeRequestTest(4)">Test Request 4</app-button>
<app-button #click="changeRequestTest(10)">Test Request 10</app-button>
<app-carousel
content-class="u-spread-horizontal--main"
center
:request-element="requestTest"
scroll-by="index"
#index-change="onIndexChange"
>
<template #header>
<h4>Placeholder images</h4>
<div>
Carousel heading h4, showing item number {{ index + 1 }}.
</div>
</template>
<template #default>
<img
:src="`https://picsum.photos/100/80?random=${n}`"
:data-carousel-item-name="n === 10 ? 'giovanni-rana' : ''"
alt=""
v-for="n in 20"
:key="n"
/>
</template>
</app-carousel>
</div>
</div>
</main>
</template>
<script>
export default {
data() {
return {
n1: 20,
n2: 20,
isAnimationOver: false,
index: 0,
requestTest: null,
};
},
methods: {
changeRequestTest(n) {
this.requestTest = n;
},
onIndexChange(e) {
this.requestTest = e;
},
logTest(msg = "hello bro") {
console.log(msg);
},
logElement(e) {
console.log(e);
},
},
created() {
this.requestTest = this.$route.query.hero;
},
};
</script>
Both components use a parameter called index, which basically registers the position (in the children array) of the element that is being focused/shown/highlighted.
...
data() {
return {
index: 0,
showBackButton: true,
showForwardButton: true,
lockScroll: false,
};
},
...
Carousel actually has a prop, requestElement, that allows the carousel to be scrolled to a specific element (via number or element name), and is used in combination with the event "index-change" to update the value in the parent component.
Now that's the problem: every time requestElement updates (there is a watcher in Carousel.vue to follow that), the Showcase component rerenders.
That's a huge problem because the Showcase component applies specific classes on the mounted hook, and on rerender, all that classes are lost. I solved the problem by calling my class-applying-methods in the update hook, but I don't particularly like this performance-wise.
Basically, if I remove any reference to requestElement, everything works as intended, but as soon as that value changes, the showcase rerenders completely. I tried to change props/params names, to use dedicated functions instead of inline scripts, nothing works. No common value is shared, neither via props or vuex, so this makes it even weirder.
Any idea why this happens?
EDIT: I tried the solution from this question, as expected no change was detected in Showcase component, but it still gets updated when requestElement is changed in Carousel.
I have a method that is called in vue js template. However, when I run the web site, this method is called infinitely
<template>
<div class="strip_list wow fadeIn" v-for="(row, index) in model.data">
<i class="icon_star voted" v-for="(val, index) in getOverallRating(row.id)">
</i>
</div>
</template>
<script>
methods: {
getOverallRating(id)
{
axios.get(`${this.apiReview}?id=${id}`).then(response =>
{
this.overall = response.data
})
return this.overall
}
}
</script>
I expect to give an id of the user, then the method should get an ID send it to the laravel controller, get calculate the rating according the entries in DB and return the result.
So, what you want to do is remove anything that would generate an api call out of your templates loop. What happens is, that every time the data changes, you re-render the template, and since you have an api call in your template, every time you render you request new data, that's why you're getting an infinite loop.
You should store the data you get from the api in a variable, and initiate API calls from outside of the loop.
<template>
<div class="strip_list wow fadeIn" v-for="(row, index) in model.data">
<i class="icon_star voted" v-for="(val, index) in overall(row.id)">
{{val}}
</i>
</div>
</template>
data: () => {
overall: {}
},
methods: {
getAll() {
// loop through all rows and make api request
this.model.data.forEach(r => this.getOverallRating(r.id))
}
getOverallRating(id) {
// make api request
axios
.get(`${this.apiReview}?id=${id}`)
.then(response => {
// and save into overall, where the id is the key
this.overall[id] = response.data
})
},
},
created(){
// initialize loading during create
this.getAll();
}
This can be further improved by not rendering anything 'till all rows are fetched. You could do that by defining another variable in data, that gets populated during getAll, and updated every time the api gets a response. But Ideally you'd be able to call the API for all reviews at once, not one at a time.
I have a list of items that don't get created until after an async call happens. I need to be able to get the getBoundingClientRect() of the first (or any) of the created items.
Take this code for instance:
<template>
<div v-if="loaded">
<div ref="myItems">
<div v-for="item in items">
<div>{{ item.name }}</div>
</div>
</div>
</div>
<div v-else>
Loading...
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
items: []
}
},
created() {
axios.get('/url/with/some/data.json').then((response) => {
this.items = response.data;
this.loaded = true;
}, (error) => {
console.log('unable to load items');
});
},
mounted() {
// $refs is empty here
console.log(this.$refs);
// this.$refs.myItems is undefined
}
};
</script>
So, I'm trying to access the myItems ref in the mounted() method, but the this.$refs is empty {} at this point. So, therefore, I tried using a component watch, and various other methods to determine when I can read the ref value, but have been unsuccessful.
Anyone able to lead me in the right direction?
As always, thanks again!!
UPDATES
Added a this.$watch in the mounted() method and the $refs still come back as {}. I then added the updated() method to the code, then was able to access $refs there and it seemed to work. But, I don't know if this is the correct solution?
How does vuejs normally handle something like dynamically moving a div to an on-screen position based on async data? This is similar to what I'm trying to do, grab an element on screen once it has been rendered first (if it even should be rendered at all based on the async data), then access it to do something with it (move it to a position)?
Instead of doing on this.$refs.myItems during mounted, you can do it after the axios promise returns the the response.
you also update items and loaded, sou if you want to use watch, you can use those
A little late, maybe it helps someone.
The problem is, you're using v-if, which means the element with ref="myItems" doesn't exist yet. In your code this only happens when Axios resolves i.e. this.loaded.
A better approach would be to use a v-show.
<template>
<div>
<div v-show="loaded">
<div ref="myItems">
<div v-if="loaded">
<div v-for="item in items">
<div>{{ item.name }}</div>
</div>
</div>
</div>
</div>
<div v-show="!loaded">
Loading...
</div>
</div>
</template>
The difference is that an element with v-show will always be rendered and remain in the DOM; v-show only toggles the display CSS property of the element.
https://v2.vuejs.org/v2/guide/conditional.html#v-show
I get this problem whenever I modify an array that is used to render a v-for list.
Let's say I've got a v-for list of three items:
<ul>
<li v-for="item in items"></li>
<ul></ul>
<ul>
<li>One</li> <!-- Has focus or a specific child component -->
<li>Two</li>
<li>Three</li>
</ul>
Add a new item to the items array:
<ul>
<li>New Item</li> <!-- Focuses on this item, the child component seems to be moved here -->
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
The focus seems to move...
Please have a look at a fiddle that illustrates the problem https://jsfiddle.net/gu9wyctr/
I understand that there must be a good reason for this behaviour, but I need to manage it or avoid completely. Ideas?
EDIT:
I've just realized that my explanation is rather ambiguous. Here's an updated fiddle to illustrate the problem https://jsfiddle.net/keligijus/d1s4mjj7/
The problem is that the input text is moved to another element...
My real life example. I've got a forum-like list of posts. Each post has an input for a reply. If someone publishes a new post while other user is typing in a reply, the input that this user is typing in is moved to another post. Just like the example in the fiddle.
Providing key is the answer!
https://v2.vuejs.org/v2/guide/list.html#key
When Vue is updating a list of elements rendered with v-for, it by default uses an “in-place patch” strategy. If the order of the data items has changed, instead of moving the DOM elements to match the order of the items, Vue will simply patch each element in-place and make sure it reflects what should be rendered at that particular index. This is similar to the behavior of track-by="$index" in Vue 1.x.
This default mode is efficient, but only suitable when your list render output does not rely on child component state or temporary DOM state (e.g. form input values).
To give Vue a hint so that it can track each node’s identity, and thus reuse and reorder existing elements, you need to provide a unique key attribute for each item. An ideal value for key would be the unique id of each item. This special attribute is a rough equivalent to track-by in 1.x, but it works like an attribute, so you need to use v-bind to bind it to dynamic values (using shorthand here):
<li v-for="(item, index) in items" :key="'item-'+item">
<input :id="'item-'+index" type="text" style="width:80%;">
</li>
Updated fiddle to show that this works https://jsfiddle.net/keligijus/d1s4mjj7/3/
Try this:
var app = new Vue({
el: '#app',
data: {
messages: [
{ message: 'Hello Vue!', id: 0 },
{ message: 'Hello Vuex!', id: 1 },
{ message: 'Hello VueRouter!', id: 2 }
],
msg: null,
focus: 'item-1'
},
mounted () {
document.getElementById(this.focus).focus()
setTimeout(() => {
this.messages.unshift({ message: 'Focus moves!', id: 3 })
}, 2000)
setTimeout(() => {
this.messages.unshift({ message: 'Moves again...', id: 4 })
this.msg = `I suppose this happens because of the way DOM is updated and I understand there must a good reason for this. However I need to avoid this behaviour. How can I do this?`
}, 4000)
},
updated: function () {
document.getElementById(this.focus).focus()
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<div id="app">
<ul>
<li v-for="(message, index) in messages">
<input :id="'item-'+message.id" type="text" v-model="message.message" style="width:80%;">
</li>
<li v-if="msg">{{msg}}</li>
</ul>
</div>
Basically I make id the same even when new items are added, and then I can track the focused item, and focus them again even after updated.