物化表单在 vue.js 组件中不起作用
Posted
技术标签:
【中文标题】物化表单在 vue.js 组件中不起作用【英文标题】：Materialize form not working in vue.js component 【发布时间】：2019-02-10 02:47:58 【问题描述】：我是 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 sn-p放在哪里，表单标签和字段重叠，漂亮的跳转效果不起作用。
我该如何解决这个问题？
【问题讨论】：
伙计，所有这些 CSS 框架在 JS 框架中都无法正常工作，我在 React 中尝试了很多，使用 jQuery 初始化的动画不起作用，甚至一次都没有。我也尝试使用带有 npm 的 materializeCSS，但这也没有用。 【参考方案1】：在您的组件定义中，您可以执行类似的操作，以确保在您的目标元素进入 DOM 之后调用具体化函数。
mounted()
this.$nextTick(M.updateTextFields);
,
可以看到mounted事件是在组件模板注入到DOMin this diagram后触发的。 $nextTick() 调用会延迟你的具体化函数的执行，直到我们确保 Vue 已经用你的元素更新了 DOM。
【讨论】：
我想进一步提供帮助，但不能没有您描述究竟是什么不起作用。有错误吗？安装不被调用？没有调用 updateTextFields 吗？您的完整、清理后的代码是什么样的？等等…… 对不起，如果我不够清楚。没有错误。表单根本没有预期的物化的动态效果，即标签在单击时不会跳到字段顶部。以上是关于物化表单在 vue.js 组件中不起作用的主要内容，如果未能解决你的问题，请参考以下文章