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

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之后调用 materialize 函数。

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

在这张图中可以看到，在组件模板被注入到 DOM 之后， mounted事件被触发了。 $nextTick()调用会延迟你的物化函数的执行，直到我们确保 Vue 已经用你的元素更新了 DOM。

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

问题描述

1 个解决方案

解决方案1
3 2018-09-05 04:23:11

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

问题描述

1 个解决方案

解决方案1 3 2018-09-05 04:23:11

解决方案1
3 2018-09-05 04:23:11