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

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:我是 vue.js 的新手，想在组件中使用materializecss框架制作一个简单的表单，这需要这个 jQuery 片段才能工作：

  $(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:和 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和 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.问题是，无论我把 jquery 片段放在哪里，表单标签都会与字段重叠，并且漂亮的跳转效果不起作用。

How can I fix this?我怎样才能解决这个问题？

Answer 1

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.在您的组件定义中，您可以执行类似的操作，以确保在您定位的元素进入 DOM之后调用 materialize 函数。

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 . 在这张图中可以看到，在组件模板被注入到 DOM 之后， mounted事件被触发了。 The $nextTick() call defers the execution of your materialize function until we've ensured Vue has updated the DOM with your elements. $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