Materialize datepicker doesn't work if I navigate to different page vue.js

问题

I am trying to implement a materialize datepicker in my vue.js project and so far I have gotten it to work as expected when the page initially loads and as long as I don't navigate to any other page it works perfectly. Soon as I do navigate to a different page then back to the page I have the date picker on it will no longer pop up the UI. I can see from doing some console logs that once addEventLister runs the initial time which is the time that datepicker works it never runs again even though mounted is ran every time I navigate to the page. I'm not sure if this is the proper behavior or not. What is causing this behavior and how do I correct it. All help is appreciated.

mounted() {
    document.addEventListener("DOMContentLoaded", function() {
      var elems = document.querySelectorAll("#datepicker");
      var options = {
        selectMonths: true,
        selectYears: 100,
        maxDate: new Date()
      };
      var instances = M.Datepicker.init(elems, options);
    });
  },

//In head
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">


//In body I have tried both versions of jquery as I read some people where having success with the 
//older one I saw no difference
 <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

If I add these print statements at the end of addEventListener

console.log(`Elems: ${elems}`);
console.log(`Instances:${instances}`);

This is what i get on first load only after that nothing as addEventListener is not being executed

Elems: [object NodeList]
Instances:

来源：https://stackoverflow.com/questions/61847954/materialize-datepicker-doesnt-work-if-i-navigate-to-different-page-vue-js

标签

javascript

html

jquery

materialize