How to Add javascript paggination code in Vue js component

Question

I'm trying to add pagination code in the Vue component and I've tried to add the code in the mounted hook to call the function but it doesn't work. I want to load the code after component loaded completely.Also, jQuery code doesn't load in Vue component. Do I need to change my code to pure javascript for that. Can you guide me how to fix the issue?

// Create a root instance for each block

var vueElements = document.getElementsByClassName('search-bento-block');
var count = vueElements.length;

const store = new Vuex.Store({
  state: {
    query: drupalSettings.bento.query ? drupalSettings.bento.query : '',
    bentoComponents: []
  },
  mutations: {
    add (state, payload) {
      state.bentoComponents.push(payload)
    }
  },
  getters: {
    getComponents: state => {
      return state.bentoComponents
    }
  }
})

// Loop through each block
for (var i = 0; i < count; i++) {
  Vue.component('results', {
    template: `
    <div v-if="results && results.length > 0">
    <div v-for="result in results">
      <div class="search-result-item">
        <div class="image-holder">
          <img src="https://images.unsplash.com/photo-1517836477839-7072aaa8b121?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=750&amp;q=80">
        </div>
        <div class="container-content">
          <a v-bind:href="result.url">
            <h3 v-html="result.title"></h3>
          </a>
          <p>Subjects: <span v-html="result.subjects"></span></p>
        </div>

      </div>
    </div>

    </div>

    <div v-else>
      <p>No results found.</p>
    </div>
    `,
    props: ['results'],
  })

   new Vue({
    el: vueElements[i],
    store,
    data: {
      message: 'Hello There!',
      results: [],
      total: 0,
      bentoSettings: [],
    },
    methods: {
      addComponentToStore: function (type) {
        this.$store.commit('add', type);
        console.log("test");
        console.log(this.results.length);

      }

    },
    mounted: function() {
      // console.log(this.$route.query.bentoq);
      const id = this.$el.id;
      this.bentoSettings = drupalSettings.pdb.configuration[id];

      var bentoConfig = drupalSettings.pdb.configuration[id].clients[this.bentoSettings.bento_type] ? drupalSettings.pdb.configuration[id].clients[this.bentoSettings.bento_type].settings : [];
      axios
        .get('/api/search/' + this.bentoSettings.bento_type, {
          params: {
            query: this.$store.state.query,
            plugin_id: this.bentoSettings.bento_type,
            bento_limit: this.bentoSettings.bento_limit,
            bento_config: bentoConfig,
          }
        })
        .then(response => {
          console.log(response);
          this.results = response.data.records;
          this.total = response.data.total;

          this.addComponentToStore({
            title: this.bentoSettings.example_field,
            count: this.total
          });
        })
        .catch(error => {
          console.log(error.response);
        })
    }
  });
}


// I'm trying to call following function in Vue component.


function baseThemePagination1() {
  //Pagination
  pageSize = 3;

  var pageCount = $('.line-content').length / pageSize;

  for (var i = 0; i < pageCount; i++) {

    $('#pagin').append('<li><a href=\'#\'>' + (i + 1) + '</a></li> ');
  }
  $('#pagin li').first().find('a').addClass('current')
  showPage = function(page) {
    $('.line-content').hide();
    $('.line-content').each(function(n) {
      if (n >= pageSize * (page - 1) && n < pageSize * page)
        $(this).show();

    });
  }

  showPage(1);

  $('#pagin li a').click(function() {
    $('#pagin li a').removeClass('current');
    $(this).addClass('current');
    showPage(parseInt($(this).text()))

  });
}

Answer 1

What you are trying to do is not the recommended way to use vue, direct DOM manipulation is one of the things that vue is made to avoid (although can be done). The Vue way would be to bind the value you want to a variable with v-model assuming it is an input and then create your pagination based on that.
If you insist on DOM manipulation then try ref="line-content" and then call it like so:
this.refs.line-content.
In terms of reacting to a page change click simply use a method in your methods section there is no reason to use jQuery for that.
See here for a simple explanation: https://medium.com/@denny.headrick/pagination-in-vue-js-4bfce47e573b