Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ctf0/vue-list-rendered
a custom directive to check if last item in list was rendered
https://github.com/ctf0/vue-list-rendered
Last synced: 26 days ago
JSON representation
a custom directive to check if last item in list was rendered
- Host: GitHub
- URL: https://github.com/ctf0/vue-list-rendered
- Owner: ctf0
- License: mit
- Created: 2018-09-23T00:14:17.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-03T23:01:39.000Z (almost 2 years ago)
- Last Synced: 2024-05-01T12:48:53.345Z (7 months ago)
- Language: JavaScript
- Size: 7.81 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
Vue List Rendered
> to avoid performance drop we hook only into the [bind function](https://vuejs.org/v2/guide/custom-directive.html#Hook-Functions) which is called only once,
> also to make sure the directive doesnt add any extra load we check by index & at the end we send the last item value.
## Installation
```bash
npm install vue-list-rendered --save
```
## Usage
- register the directive
```js
window.Vue = require('vue')
require('vue-list-rendered')
new Vue({
el: '#app',
})
```
- add `v-list-rendered="[index, list, callback]"` to your `v-for` element
+ to debug the results add `:debug` argument ex.`v-list-rendered:debug="..."` then check your console.
```html
-
...
export default {
data() {
return {
blogList: [...]
}
},
methods: {
doSomething(lastItem) {
console.log(lastItem)
}
}
}
```
### Security
If you discover any security-related issues, please email [[email protected]](mailto:[email protected]).