current-page/currentPage attribute from el-pagination in Element-Plus is not working(?)

Question

Situation

According to the doc of element-plus.org: https://element-plus.org/#/en-US/component/pagination you should be able to set a current page for the pagination component.

My page/component works except if I enter the page with a fresh page-load I would want the component to take over the param "page" that translates into the reactive variable "currentPage" and use that to set the current page as a highlight in the component.

Problem

However the component keeps showing page 1 even though the attribute is being set to, say, 3. The currentPage is perfectly reactive and is shown when parsed in moustache above it.

Inconsistancy in docs?

I tried different things but their own documentation is not consistent either or am I dumb.

In the "more elements" example it shows v-model:currentPage="currentPage1" but in the "Attributes" section it says: :current-page and :default-current-page. Both don't work either.

My code [template]:

  {{ currentPage }} <!-- this actually shows the page I am currently on from param -->
  <el-pagination
    @current-change="paginate"
    :currentPage="currentPage"
    :current-page="currentPage"
    :default-current-page="currentPage"
    :total="data.length"
    :page-size="limit"
    :pager-count="6"
    layout="prev, pager, next"
  >
  </el-pagination> <!-- evil component only highlights (default) 1 -->

The relevant part in setup():

    const currentPage = ref();
    watch(props, () => {
      currentPage.value = router.currentRoute.value.params.page || 1;
      initOutputVal();
    });
    // pagination
    const paginate = (e) => {
      router.push({ params: { page: e } });
    };
    const initOutputVal = () => {
      let startSlice = (currentPage.value - 1) * props.limit;
      output.value = props.limit ? props.data.slice(startSlice, startSlice + props.limit) : props.data;
    };

Does anyone know if I'm doing something wrong? Doesn't element-plus test their stuff or am I being ignorant here? What would be the best solution?

Answer 1

The problem is solved. A colleague pointed out the value is not really an integer. Use parseInt() if you are getting a value from the url like I do. In my case:

currentPage.value = parseInt(router.currentRoute.value.params.page) || 1;