Currently in the process of upgrading my materializecss version from 0.100.1 to 1.0.0. I meticulously followed the steps outlined in the upgrade guide, making all necessary changes to my code. However, despite these efforts, I am encountering multiple javascript errors. The application utilizes vue 2.6.10.
Tabs:
The tabs are generated by a custom Vue component:
<ul class="tabs timerange" id="timeTab" style="width: 90%">
<input type="hidden" id="time" v-model="$parent.syncData.currentTime">
<li style="width:75px; display: inline-block" v-bind:data-time="value"
v-for="(value,key) in $parent.syncData.timeGrid"
class="tab">
<a class="text-black" v-bind:href="'#tab_'+key"
v-on:click="$parent.setTime(value)">{{value}} h</a>
</li>
</ul>
They are then initialized using jQuery in a separate JavaScript file:
$(document).ready(function() {
$('#timeTab').tabs();
});
However, this setup leads to the following error:
https://i.sstatic.net/R7Zgh.png
Attempts were made to initialize them within the created() and updated() callbacks of the Vue component without success.
Dropdowns:
Encountering an error with dropdowns as well:
https://i.sstatic.net/tAG9e.png
This issue is reproducible when substituting actual code for the dropdown with the example provided in the materializecss documentation.
Any guidance on resolving these errors or suggestions for effective debugging methods?