Vue.JS - Error in nextTick: “TypeError: Cannot read property ‘badInput’ of undefined”

user_6476173 0
Viewed 3525

I received this Error:

vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in nextTick: "TypeError: Cannot read property 'badInput' of undefined"

found in

---> <MdSelect> at src/components/MdField/MdSelect/MdSelect.vue
       <MdField> at src/components/MdField/MdField.vue
         <MdCardContent> at src/components/MdCard/MdCardContent/MdCardContent.vue
           <MdCard> at src/components/MdCard/MdCard.vue
             <MdContent> at src/components/MdContent/MdContent.vue
               <MdDialog> at src/components/MdDialog/MdDialog.vue
                 <Loading> at src/components/Loading.vue
                   <QuadroHorarioSalaNormal>
                     <Loading> at src/components/Loading.vue
                       <MdContent> at src/components/MdContent/MdContent.vue
                         <MdAppContent> at src/components/MdApp/MdAppContent.vue
                           <MdAppSideDrawer> at src/components/MdApp/MdAppSideDrawer.vue
                             <ComSidebarLayout> at src/layouts/ComSideBar.vue
                               <App> at src/App.vue
                                 <Root>

This error occurs when an option is selected in the select:

<md-dialog :md-active.sync="showInserirDisciplina">
            <md-dialog-title><md-icon>article</md-icon> Incluir Disciplina</md-dialog-title>
            <md-content>
                <form novalidate class="md-layout" style="min-width: 500px;">
                    <md-card class="md-layout-item md-size-100 md-small-size-100">
                        <md-card-content>
                            <md-field>
                                <label for="disciplina"> Disciplina</label>
                                <md-select v-model="disciplina" name="disciplina" id="disciplina" @md-selected="carregaDisciplinasEquivalentes" class="filtro" style="color:#6361FB !important">
                                    <md-option :value="0" ></md-option>
                                    <md-option :value="c.codigoDisciplina" v-for="c in dadosDisciplinas">
                                        {{c.disciplina}}
                                    </md-option>
                                </md-select>
                            </md-field>

Please, someone can help me?

Best regards for all reply,

vue.js
2 Answers

As per the github issue this is a bug in the vue material codebase - and looks like someone has provided a PR so you may be able to fix by upgrading the version.

Personally I fixed this quickly by following the advice of user "bart-src" there and simply changed my local code:

  1. Locate node_modules\vue-material\dist\vue-material.js
  2. Search for isInvalidValue
  3. swap out the code:

old:

return this.$el.validity.badInput;

new:

return this.$el.validity ? this.$el.validity.badInput : false;

for me this was ~line 1059

user_6615840

Try with:

npm i vue-material@1.0.0-beta-11
user_124075280
Related