Question

我是vue.js的新手，并且希望使用materializecss框架在组件中制作一个简单的表单，这需要以下jQuery片段才能起作用：

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

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

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

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

我该如何解决？

Answer 1

在组件定义中，您可以执行类似的操作，以确保在目标对象已将其放入DOM后调用后的实现函数。

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

您可以看到mounted事件是在将组件模板注入DOM in this diagram中之后触发的。 $nextTick()调用将延迟您的实现功能的执行，直到我们确保Vue已使用您的元素更新了DOM。

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

1 个答案: