0

I have no clue what to do to fix this.

I've installed a JQuery library (http://st3ph.github.io/jquery.easyPaginate/) to help me paginate my data. I am also using Vue.js to make things easier. However, after installing the plugin, and seeing that pagination does in fact work, I noticed that my click handlers stopped working! In fact, I have some filters that also call other Javascript function to execute the filter code... but they are all not working. After inspecting the HTML code using Chrome's Developer Tools (F12)... all I can see is that the plugin is adding an 'easyPaginate easyPaginateList' class to the tags.

So... the plugin makes the <ol> tag look like:

<ol id="cards" class="easyPaginate easyPaginateList">

Anyway,

My HTML looks like this:

<div id="BrowseCards">
   <ol id="cards">
       <li v-for="(card, i) in cards" v-on:click="cardDetails($event)">
           <span :id="card.Id" style="display:none"></span>
           <img src="card.ImageUrl"/>
           <h2 name="title">{{card.Title}}</h2>
       </li>
   </ol>
</div>

The Javascript looks like:

<script>
    methods: {
                cardDetails: function (event) {
                   var cardId = $(event.target.parentElement)[0].firstChild.id;
                   window.location = 'https://' + location.host + '/Home/CardDetails/?cardId=' + cardId;
                },

                ...

                [*** other Javascript functions ***]

                ...

                setupPagination: function () {
                     $('.easyPaginate').easyPaginate({
                          paginateElement: 'li',
                          elementsPerPage: 4,
                          effect: 'slide'
                });
            },
     
     mounted: function()
     {
          this.setupPagination();
     }
</script>

The Problem: This was working before but, now, all my scripts don't fire.

My Question for You:

 1. What am I doing wrong/what am I missing?
 2. And, how do I integrate a pagination plugin that does NOT break my code?

Thanks in advance.

ajavad
  • 105
  • 11
  • https://stackoverflow.com/questions/44134147/vue-js-removes-jquery-event-handlers https://stackoverflow.com/questions/53232661/how-does-vue-overwrite-jquery-event-listeners – react_or_angluar Dec 19 '20 at 01:04
  • Maybe you shouldn't use jQuery to bind – react_or_angluar Dec 19 '20 at 01:06
  • @jqueryHtmlCSS I agree. But I used v-on:click="cardDetails($event)" as my click handler. – ajavad Dec 19 '20 at 01:08
  • @jqueryHtmlCSS Actually it still doesn't work. I already had the eventHandling code in the "mounted" area. – ajavad Dec 19 '20 at 01:17
  • @jqueryHtmlCSS I've read through the articles you pasted - which I appreciate. However, but I haven't been able to fix it still. The click handlers are done correctly. Something must be happening with the plugin once I initialize it. – ajavad Dec 19 '20 at 01:59
  • 1
    I'm not sure what the actual question you want us to answer is here. Revert your code to before you installed that jquery library, then read up on how to combine vue with jquery (which you really shouldn't be doing, the whole point of vue is that it runs the show. https://vuejsdevelopers.com/2017/05/20/vue-js-safely-jquery-plugin/ is a good starting place) and then gradually build your code back up if you _absolutely_ have to use jquery instead of using a vue plugin? But really: find a vue plugin, instead. – Mike 'Pomax' Kamermans Dec 19 '20 at 02:55
  • @Mike'Pomax'Kamermans Thanks for that. I'll update my post & pose a clear question. – ajavad Dec 19 '20 at 03:13
  • 1
    there are so many component libraries that you can use with vue instead. Vueitfy: https://vuetifyjs.com/en/ Bootsrap: https://bootstrap-vue.org/ – Rogelio Dec 19 '20 at 04:02
  • @Roj Thanks for the lead. I'm going to go with this: https://vuejsexamples.com/vue-ads-pagination-is-a-vue-js-pagination-component/. Take care & Thank you. – ajavad Dec 19 '20 at 21:46

1 Answers1

0

I ended up solving this with the help of @Roj's, and others' comments, and going from their clues/leads. Basically, it's ill-advised to use a JQuery pagination plugin when you are coding with Vue.js. I was able to solve this issue by, instead, using a Vue.js plugin for pagination.

I implemented what these two articles detailed, and solved the issue.

  1. https://medium.com/@nickpgott/how-to-use-vue-bootstrap-to-paginate-a-list-of-items-3b8e67093c07
  2. https://bootstrap-vue.org/docs/components/pagination/

Pagination now works for me on my app. Thanks and happy holidays!

ajavad
  • 105
  • 11