Equalizee's avatar

Vue reactivity question

Hi There.

I am starting to build a pagination component in Vue.

I have the following code:

<template>
  <div class="pagination">
    <div
      class="next"
      @click="updateCurrentPage(currentPage++)"
    >
      <i class="fas fa-chevron-right"></i>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'Pagination',

    data() {
      return {
        currentPage: 1,
      }
    },

    methods: {
      updateCurrentPage(pageNumber) {
        console.log(pageNumber);
      }
    }
  }
</script>

The problem is that I don't know why my currentPage data is updating. I only give the next current page as parameter to the UpdateCurrentPage method, which should do nothing other than logging here for now..

My currentPage data is updating every time I click the element with the 'next' class. Does anyone know why this is updating?

0 likes
4 replies
Sergiu17's avatar
updateCurrentPage(currentPage++)

currentPage++ ?

Equalizee's avatar

@SERGIU17 - Yeah, but it's set as a parameter. I didn't know it would still update the same way.

Please or to participate in this conversation.