CODEWITHSUNDEEP
javascriptvue.jsmaterialize
Daniel
Daniel

Reputation: 1041

Upgrading materializecss from 0.100.1 to 1.0.0 results in multiple javascript errors

I'am trying to upgrade my materializecss from 0.100.1 to 1.0.0. I followed the upgrade guide and applied all the changes to my code but I am still facing multiple javascript errors. In our application we are using vue 2.6.10.

Tabs:
Our tabs are rendered by a 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>

Then they get initialized in a separate javascript with jquery:

$(document).ready(function() {
    $('#timeTab').tabs();
});

This results in the following error: tabs javascript error I've already tried initializing them in the created() and updated() callbacks of the vue component but without success.

Dropdown:
For dropdowns I get the following error: dropdown javasript error This error is reproducible when I comment my code for the dropdown and replace it with the example code from the materializecss docs.

How can I fix these kind of errors or where is a good start to debug?

Upvotes: 2

Views: 142

Answers (1)

Daniel
Daniel

Reputation: 1041

We had some duplicate initializations within the code. As well as some were initialized with jquery and some not. Cleaning up the initialization and only initializing the components once without jquery fixed the errors.

materializecss checks if already instances for the given elements exists and if they do they will be destroyed and reinitialized but within the destroy process we got the errors.

Upvotes: 1

Related Questions