Materialize form not working in vue.js component

Question

I'm new to vue.js and want to make a simple form using materializecss framework in a component, which requires this jQuery snippt to work:

  $(document).ready(function() {
    M.updateTextFields();
  });

The component is:

<template>  
  <div>
       <div class="row">
        <div class="input-field col s6">
          <input value="" id="first_name2" type="text" class="validate">
          <label class="active" for="first_name2">First Name</label>
        </div>
      </div>
  </div>
</template>

<script>

  $(document).ready(function() {
    M.updateTextFields();
  });
export default {
  name: 'Login',
  data: function () {
   //rest of the scripts

      }

</script>

<style>
</style>

And the App.vue:

<template>
  <div id="app">
        <head>
          <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
          <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.css" rel="stylesheet">

            $(document).ready(function() {
    M.updateTextFields();
  });


        </head>
        <NavbarComp/>
        <div id="middle">
            <<router-view/>     
        </div>

        <FooterComp/>
  </div>
</template>

<script>
import NavbarComp from './components/Navbar.vue';
import FooterComp from './components/Footer.vue';
import Landing from './components/Landing.vue';
import Login from './components/Login.vue';
import Register from './components/Register.vue';

export default {
  name: 'app',
  components: {
    NavbarComp,
    Landing,
    FooterComp,
    Login,
    Register
  }
}
</script>

And main.js

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'

import Routes from './routes'

const router = new VueRouter({
    routes: Routes,
    mode: 'history'
});

Vue.use(VueRouter);

new Vue({
    router: router,
  render: h => h(App)
}).$mount('#app')

The problem is that where ever I put the jquery snippet, the form label overlaps the field and the nice jump effect does not work.

How can I fix this?

Man, all these CSS frameworks won't work properly in JS frameworks, I've tried a lot in React, the animations which are initialised using jQuery didn't worked, not even once. I tried with materializeCSS with npm also but that also didn't worked. — Germa Vinsmoke
– Germa Vinsmoke, Commented Sep 5, 2018 at 13:26

tony19 · Accepted Answer · 2022-07-15 22:18:02Z

3

In your component definition you can do something like this to ensure you're calling the materialize function after the elements you're targeting have made it into the DOM.

mounted() {
  this.$nextTick(M.updateTextFields);
},

You can see the mounted event is triggered after the component template is injected into the DOM in this diagram. The $nextTick() call defers the execution of your materialize function until we've ensured Vue has updated the DOM with your elements.

edited Jul 15, 2022 at 22:18

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Sep 5, 2018 at 4:23

deefour

35.4k7 gold badges99 silver badges91 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

deefour Over a year ago

I'd like to help further, but can't without you describing what exactly isn't working. Is there an error? is mounted not being called? Is updateTextFields not being called? What does your full, cleaned up code look like? Etc...

Karlom Over a year ago

Sorry if I was not clear enough. There is no error. The form simply does not have the expected materialize's dynamic effect, that is the label does not jump on top of the field, when clicked.

Collectives™ on Stack Overflow

Materialize form not working in vue.js component

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related