Utilizing the Element UI el-pagination component in my project like so:
<el-pagination
@size-change="handleChange"
@current-change="CurrentChange"
:current-page.sync="currentPage"
:page-sizes="[50, 100, 150, 300]"
:page-size="pageSize"
popper-class="popper"
layout="sizes, prev, pager, next"
:total="getTotal"
/>
I have defined the necessary methods:
CurrentChange(val) {
this.currentPage = val;
},
In order to streamline usage across multiple instances, I created a mixin named pagination.js.
To enhance accessibility, I included keyboard event listeners for elements like so:
document.querySelectorAll('ul.el-pager li.number').forEach((element, index) => {
element.addEventListener('keyup', function (e) {
if (e.key == 'Enter' || e.key == 'Space') {
this.$root.CurrentChange(element.innerHTML);
}
});
})
However, I am encountering an issue where 'undefined' is returned.
Upon further investigation with console.log(this.$root), it appears that the Vue root context is not accessible as expected. What could be causing this discrepancy?