Форма материализации не работает в компоненте vue.js - PullRequest
Новая
       7

Форма материализации не работает в компоненте vue.js

0 голосов
/ 05 сентября 2018

Я новичок в 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>

и приложение. 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, метка формы перекрывает поле, и эффект красивого прыжка не работает.

Как я могу это исправить?

1 Ответ

0 голосов
/ 05 сентября 2018

В своем определении компонента вы можете сделать что-то подобное, чтобы гарантировать, что вы вызываете функцию материализации после элементы, на которые вы нацелены, попали в DOM. 

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

Вы можете увидеть событие mounted, которое запускается после внедрения шаблона компонента в DOM на этой диаграмме . Вызов $nextTick() откладывает выполнение вашей функции материализации до тех пор, пока мы не убедимся, что Vue обновил DOM вашими элементами.

...