Javascript 物化表单在vue.js组件中不起作用

我是vue.js新手，希望在组件中使用框架制作一个简单表单，这需要jQuery snippt才能工作：

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

该部分是：

<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>

问题是，无论我将jquery代码段放在哪里，表单标签都会与字段重叠，并且良好的跳转效果不起作用

---

如何修复此问题？

在组件定义中，可以执行类似操作，以确保在目标元素进入DOM后调用materialize函数

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

---

您可以看到，组件模板被注入DOM后，会触发

mounted

事件。调用

$nextTick（）

会推迟您的materialize函数的执行，直到我们确保Vue已使用您的元素更新DOM。

我想进一步提供帮助，但如果您不描述到底是什么不起作用，我将无法提供帮助。有错误吗？没有人打电话吗？是否未调用updateTextFields？您完整的、经过清理的代码是什么样子的？等等…如果我不够清楚，很抱歉。没有错误。表单根本没有预期的materialize的动态效果，即当单击时，标签不会跳到字段顶部。伙计，所有这些CSS框架在JS框架中都不能正常工作，我在React中尝试了很多，使用jQuery初始化的动画没有工作，甚至一次也没有。我也尝试过使用npm的物化ECS，但也不起作用。

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')

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